1
00:00:02,200 --> 00:00:08,590
Stellen wir also sicher, dass unsere Produktartikel auf dem Produktübersichtsbildschirm etwas

2
00:00:11,860 --> 00:00:16,520
besser aussehen als derzeit. Im Moment natürlich natürlich Jedes Produktelement wird

3
00:00:16,540 --> 00:00:22,090
nur als Text, als Textkomponente gerendert, und das möchte ich hier nicht. Stattdessen entferne ich diesen Import und erstelle

4
00:00:22,090 --> 00:00:24,970
eine brandneue Komponente, die für mein Produktelement verantwortlich sein sollte.

5
00:00:25,060 --> 00:00:31,540
Ein wichtiger Hinweis dazu, wo wir diese Komponente erstellen, können wir hier in

6
00:00:31,560 --> 00:00:35,510
der Produktübersicht erstellen. js Datei auch, wir können natürlich

7
00:00:35,530 --> 00:00:41,890
mehr als eine Komponente pro Datei haben, also könnte ich hier meine Produktartikelkomponente hinzufügen oder wie auch immer Sie es so nennen

8
00:00:41,890 --> 00:00:47,250
möchten, dann können wir diese Komponente in dieser Datei verwenden, was natürlich ist was ich vorhabe zu tun.

9
00:00:47,290 --> 00:00:52,870
Dies ist ein Muster, das Sie verwenden können, wenn Sie eine Komponente haben, die wirklich stark an eine andere Komponente gebunden

10
00:00:53,080 --> 00:00:57,070
ist, und Sie sie nur so aufteilen, dass jede Komponente etwas besser lesbar ist.

11
00:00:57,370 --> 00:01:03,160
Sobald diese separaten Komponenten sehr groß werden, sollten Sie dennoch in Betracht ziehen, sie in separate Dateien aufzuteilen,

12
00:01:03,190 --> 00:01:08,350
damit Ihre Dateien klein bleiben. Wenn Benutzer sich eine der beiden Komponenten ansehen möchten, müssen

13
00:01:08,350 --> 00:01:12,700
sie nicht über die andere Komponente scrollen sie könnten nicht interessiert sein.

14
00:01:12,820 --> 00:01:18,730
Das ist also eine Sache, die Sie beachten sollten. Wenn Sie eine Komponente auch in einer anderen Komponente verwenden

15
00:01:19,150 --> 00:01:25,990
möchten, sollten Sie sie natürlich immer in einer separaten Datei speichern, nicht nur, damit Sie sie standardmäßig exportieren können, da Sie sie auch exportieren

16
00:01:25,990 --> 00:01:29,950
können, wenn sie zusammen mit einer anderen Komponente gespeichert wird. Dies ist nicht

17
00:01:30,520 --> 00:01:36,550
der Hauptgrund, sondern vor allem, um deutlich zu machen, dass dies eine eigenständige Komponente ist, die möglicherweise in verschiedenen Teilen Ihrer

18
00:01:36,550 --> 00:01:38,310
App verwendet wird und wird.

19
00:01:38,350 --> 00:01:45,550
Jetzt wird das Produkt hier nicht nur nicht sehr klein sein, was für sich genommen ein Grund wäre, es in

20
00:01:45,550 --> 00:01:51,460
eine separate Datei zu stellen, sondern ich werde es später auch in einer anderen Komponente oder

21
00:01:51,460 --> 00:01:57,970
an verschiedenen Stellen der App verwenden, es ist nicht nur relevant Zum Produktübersichtsbildschirm füge ich ihn daher im

22
00:01:57,970 --> 00:02:04,030
Komponentenordner und in diesem Komponentenordner hinzu. Um meine Komponenten ein wenig zu organisieren, füge ich einen

23
00:02:04,120 --> 00:02:10,300
Shop-Unterordner hinzu, in dem ich alle vorhandenen Komponenten platzieren möchte in direktem Zusammenhang mit der Shop-Funktion oder

24
00:02:10,300 --> 00:02:12,950
den Funktionen im Allgemeinen meiner App.

25
00:02:13,090 --> 00:02:19,390
Dort im Shop-Unterordner füge ich dieses ProductItem hinzu. js Datei und Sie werden sehen, welche anderen Ordner

26
00:02:19,390 --> 00:02:21,540
ich später hier hinzufügen werde.

27
00:02:21,550 --> 00:02:27,640
Alle diese Muster und Praktiken, die ich Ihnen hier zeige, sind nur mögliche Möglichkeiten, dies zu tun. Im Allgemeinen zeige

28
00:02:28,360 --> 00:02:34,480
ich in meinen Kursen und auch in diesem Kurs alle Best Practices, die Sie verwenden können, aber häufig beim Programmieren gibt

29
00:02:34,480 --> 00:02:37,270
es keine Nur ein einziger richtiger oder falscher

30
00:02:37,390 --> 00:02:43,180
Weg, also sind die Praktiken und Muster, die ich hier zeige, Praktiken und Muster, die Sie auch in anderen Projekten

31
00:02:43,180 --> 00:02:48,670
sehen werden, aber Sie können auch andere Ordnerstrukturen sehen. Am Ende können Sie immer mit der Struktur arbeiten,

32
00:02:48,670 --> 00:02:55,480
die funktioniert für Sie, hier gibt es keine richtige oder falsche Wahl. Ich möchte nur meine Gründe für die Verwendung dieser Struktur erläutern,

33
00:02:55,480 --> 00:03:00,910
die Ihnen hoffentlich helfen, zu verstehen, warum ich sie verwende und warum dies einen Gedanken wert sein könnte.

34
00:03:01,900 --> 00:03:10,960
Also hier die Produktartikeldatei, das ProductItem. Die js-Datei enthält natürlich die Produktelementkomponente, die eine normale Funktionskomponente ist, die Requisiten

35
00:03:10,960 --> 00:03:16,110
empfängt und am Ende jsx-Code zurückgibt. Da sie jsx-Code enthält, müssen wir React aus React

36
00:03:16,120 --> 00:03:22,750
importieren, und hier werde ich auch Importieren Sie Dinge aus React Native, da ich hier jetzt mit diesen React Native-Grundelementen

37
00:03:23,170 --> 00:03:30,070
arbeiten werde, um meine Komponente wirklich zu erstellen, da ich von dort aus die Ansicht, den Text und das Bild

38
00:03:30,520 --> 00:03:34,930
verwenden möchte, weil wir ' Ich werde hier das Produktbild und auch

39
00:03:34,930 --> 00:03:42,310
das Stylesheet anzeigen, da wir dies definitiv auch stylen werden. Daher können Sie hier auch bereits eine Styles-Konstante

40
00:03:42,310 --> 00:03:48,190
hinzufügen, die wir mit Stylesheet erstellen. erstellen, an die wir ein Javascript-Objekt übergeben,

41
00:03:48,190 --> 00:03:56,170
und am Ende exportieren wir dieses Produktelement hier natürlich standardmäßig. Jetzt hier, in dieser Komponente, meine ich, können wir mit

42
00:03:56,170 --> 00:04:02,350
der Erstellung des jsx-Codes beginnen, aus dem das Produktelement besteht, und dies wird eine Präsentationskomponente sein,

43
00:04:02,350 --> 00:04:08,500
was bedeutet, dass hier keine Logik vorhanden ist, wir werden keinen internen Status verwalten. Dies ist

44
00:04:08,530 --> 00:04:14,630
nur eine Komponente, die wir in anderen Komponenten verwenden können, um das richtige Design und

45
00:04:14,630 --> 00:04:21,250
Layout zu erhalten. Daher ist diese Komponente hier dafür verantwortlich, bestimmte React Native-Komponenten zu verwenden und sie

46
00:04:21,400 --> 00:04:28,090
auf eine bestimmte Weise auszulegen und zu gestalten. Hier möchte ich am Ende eine Ansicht

47
00:04:28,090 --> 00:04:34,150
zurückgeben, die alles umhüllt, die alles organisiert, die wir auch stylen können, um

48
00:04:34,150 --> 00:04:42,100
diesen Wagen-Look mit vielleicht einem Schlagschatten, vielleicht abgerundeten Ecken zu erhalten, was auch immer Sie wollen, und da

49
00:04:42,100 --> 00:04:50,460
drin, wir jetzt haben verschiedene Teile, zum Beispiel haben wir definitiv das Bild dort, das Produktbild, ich möchte auch

50
00:04:50,460 --> 00:04:53,480
den Titel und den Preis haben, also

51
00:04:53,700 --> 00:05:04,630
brauchen wir hier einen Text, also für den Titel hier und hier dann Für den Preis in Dollar und darunter möchte ich auch eine

52
00:05:05,200 --> 00:05:07,650
Ansicht mit Schaltflächen haben, sodass

53
00:05:07,650 --> 00:05:14,680
wir hier momentan die integrierte Schaltflächenkomponente verwenden können, um dann ein Produkt in den Warenkorb

54
00:05:14,680 --> 00:05:22,120
zu legen oder auch die Details anzuzeigen Wenn wir also diese beiden Optionen haben, müssen wir

55
00:05:22,120 --> 00:05:26,760
hier natürlich onPress-Handler hinzufügen. Das ist also das sehr grundlegende Skelett, wahrscheinlich

56
00:05:26,770 --> 00:05:30,880
nicht das letzte. Wir müssen sehen, wie wir hier alles stylen können, aber das ist

57
00:05:30,930 --> 00:05:32,390
das Layout, das ich will.

58
00:05:32,500 --> 00:05:37,460
Ich wickle meine Schaltflächen hier übrigens in die Ansicht ein, weil ich sie nebeneinander in der Reihe haben möchte.

59
00:05:37,510 --> 00:05:43,030
Wenn wir eine Ansicht um sie haben, können wir diese Ansicht so gestalten, dass sie eine Reihe mit flexibler Richtung verwendet

60
00:05:43,040 --> 00:05:43,960
und so weiter.

61
00:05:43,990 --> 00:05:45,040
Das

62
00:05:45,040 --> 00:05:47,320
ist also ein Setup, mit

63
00:05:47,440 --> 00:05:49,850
dem wir hier arbeiten können. Fügen

64
00:05:49,960 --> 00:05:53,980
wir nun ein paar Stile hinzu. Dazu möchte ich die

65
00:05:53,980 --> 00:05:59,980
umgebende Ansicht verwenden oder hier beginnen, in der ich ein Stile-Produkt wie dieses einrichte. Deshalb

66
00:05:59,980 --> 00:06:03,900
füge ich hier im Stylesheet ein solches Produkt hinzu.

67
00:06:04,020 --> 00:06:07,200
Fügen Sie hier und jetzt wieder meinen

68
00:06:07,210 --> 00:06:17,650
Produktschlüssel hinzu. Es liegt ganz bei Ihnen, wie Sie dies gestalten möchten. Ich möchte, dass die Karte so aussieht. Deshalb füge ich einen Schatten hinzu,

69
00:06:17,650 --> 00:06:27,580
eine Schattenfarbe, die schwarz sein kann, eine Schattenopazität das kann 0 sein. 26, ein Schattenversatz, bei dem ich den Breitenversatz von Null und einen Höhenversatz

70
00:06:27,610 --> 00:06:32,080
von zwei und einen Schattenradius von acht habe, vielleicht und wie

71
00:06:32,080 --> 00:06:36,490
immer mit diesen Werten herumspielen, um Ihre Konfiguration zu finden.

72
00:06:36,490 --> 00:06:39,320
Jetzt erinnern Sie sich vielleicht daran, dass Shadow nur

73
00:06:39,340 --> 00:06:45,670
unter iOS funktioniert. Für Android füge ich hier die Elevation-Eigenschaft hinzu und setze diese möglicherweise auf fünf. Auch hier können

74
00:06:45,670 --> 00:06:48,070
Sie wieder mit verschiedenen Werten experimentieren, und

75
00:06:48,160 --> 00:06:52,500
ich möchte einen Randradius von 10 haben, weil Ich möchte abgerundete Ecken und

76
00:06:52,510 --> 00:06:54,250
wieder, das ist etwas,

77
00:06:54,250 --> 00:07:00,400
was ich hier möchte, etwas, das Sie nicht tun müssen. Ich werde auch eine Hintergrundfarbe Weiß hinzufügen, um sicherzustellen,

78
00:07:00,430 --> 00:07:05,290
dass unser Warenkorb hier, unser Produkt, immer diese Hintergrundfarbe hat, auch wenn unsere

79
00:07:05,290 --> 00:07:14,190
Haupt-App später eine andere Hintergrundfarbe verwenden sollte. Das ist also mein Produkt, meine Hülle hier um das gesamte Produkt. Ich möchte hier auch meine Körpergröße einstellen, jedes

80
00:07:14,190 --> 00:07:16,920
Produkt sollte eine Höhe von 300 Pixel

81
00:07:16,920 --> 00:07:21,750
haben und das ist natürlich ein Wert, den Sie auch an Ihre Anforderungen

82
00:07:21,750 --> 00:07:22,670
anpassen können.

83
00:07:22,740 --> 00:07:28,050
Sie können dies natürlich auch mit der Dimensions-API dynamisch gestalten, wie Sie es im

84
00:07:28,050 --> 00:07:34,830
Responsive-Modul gelernt haben, und ich werde einen Rand von 20 in alle Richtungen um jedes Produktelement hinzufügen,

85
00:07:34,860 --> 00:07:42,070
damit wir einen Abstand in alle Richtungen haben. Mit diesem Setup können wir anfangen, an der Ausgabe von

86
00:07:42,230 --> 00:07:47,330
etwas zu arbeiten. Das Image benötigt also eine Quelle und wir erhalten hier ein Netzwerk-Image.

87
00:07:47,330 --> 00:07:52,940
Wenn Sie sich die Dummy-Daten ansehen, sind alle diese Image-URLs hier URLs Im Modell erwarten wir

88
00:07:52,940 --> 00:07:54,260
hier eine URL,

89
00:07:54,290 --> 00:07:59,480
also zu einem Netzwerk-Image, und das wäre natürlich die Standardeinstellung für jeden Shop, den Sie

90
00:07:59,480 --> 00:08:06,740
erstellen, da Sie niemals alle Produkt-Images in Ihre App aufnehmen, zumindest wenn es keine gibt App-Shop für ein Spiel, aber wenn es

91
00:08:06,740 --> 00:08:09,070
sich um einen Shop handelt, in dem

92
00:08:09,110 --> 00:08:14,070
Benutzer Produkte erstellen können, erstellen Benutzer offensichtlich Produkte dynamisch, nachdem Ihre App verteilt wurde.

93
00:08:14,240 --> 00:08:20,300
Daher können Sie nicht alle Bilder in Ihre App aufnehmen, sondern müssen sie auf einem Server speichern .

94
00:08:21,450 --> 00:08:26,740
Daher müssen wir hier ein Objekt an die Quelle übergeben, in der wir die

95
00:08:26,910 --> 00:08:32,120
URI-Eigenschaft festgelegt haben, und das wird nun von außen empfangen, da diese Produktelementkomponente präsentativ

96
00:08:32,130 --> 00:08:38,060
ist. Daher müssen alle anzuzeigenden Daten über Requisiten und dort übergeben werden Sie könnten die Image-Requisite

97
00:08:38,070 --> 00:08:40,680
erwarten, aber wie bei allen Requisiten

98
00:08:40,680 --> 00:08:47,610
in Ihren eigenen Komponenten können Sie beliebige Namen auswählen. Für den Titel erwarte ich eine Titelstütze und für den Preis erwarte

99
00:08:47,610 --> 00:08:52,740
ich eine Preisstütze. Ich werde das Dollarzeichen hier übrigens behalten, weil der Preis nur eine Zahl sein wird

100
00:08:52,740 --> 00:08:55,210
und ich natürlich eine haben möchte Dollarzeichen davor.

101
00:08:55,350 --> 00:09:02,640
Nun eine kleine Anmerkung hier, ich möchte sicherstellen, dass der Preis, den ich bekomme, immer genau zwei Dezimalstellen hat, und wir können dies

102
00:09:03,020 --> 00:09:10,520
erreichen, indem wir anrufen, dies zu fixieren und zwei zu übergeben. Zu fest ist eine Funktion, die für

103
00:09:10,560 --> 00:09:17,940
Zahlen in Javascript verfügbar ist und diese in eine Zeichenfolge mit einer festen Anzahl

104
00:09:17,940 --> 00:09:21,870
von Dezimalstellen konvertiert. Hier beschränke ich mich

105
00:09:21,870 --> 00:09:23,210
auf immer

106
00:09:23,280 --> 00:09:34,310
zwei Dezimalstellen, das ist normales Javascript, nichts Spezielles für React Native. Wenn wir jetzt auf die Schaltfläche "Details anzeigen" klicken, werden Requisiten für Ansichtsdetails

107
00:09:34,400 --> 00:09:41,960
ausgelöst. Daher verwende ich hier wieder einen Namen, den Sie konfigurieren oder benennen können, wie Sie möchten. Die

108
00:09:41,960 --> 00:09:47,240
Idee hier ist jedoch, dass Requisiten für Ansichtsdetails auf eine Funktion verweisen,

109
00:09:47,240 --> 00:09:51,220
die in Das Ende wird ausgeführt, wenn dieser Knopf

110
00:09:51,230 --> 00:09:58,900
gedrückt wird. Wenn dieser Knopf gedrückt wird, zeige ich hier auf eine Funktion, die ich auf der On-Add-to-Cart-Requisite erwarte.

111
00:09:58,940 --> 00:09:59,300
Auch

112
00:09:59,540 --> 00:10:03,650
hier können Sie diese Requisiten beliebig benennen. Wenn Sie jedoch Ihre Komponente verwenden,

113
00:10:03,740 --> 00:10:10,370
müssen Sie sicherstellen, dass sie verfügbar sind und dass sie Werte erhalten, die Funktionen sind, die dann über diese Schaltflächen ausgelöst werden.

114
00:10:10,370 --> 00:10:14,300
Jetzt bekommen wir alle Daten. Da es sich bei dem

115
00:10:14,420 --> 00:10:21,440
Image um ein Netzwerk-Image handelt, müssen Breite und Höhe festgelegt werden, da das Image dies nicht im Voraus sehen kann, da

116
00:10:21,440 --> 00:10:24,600
dies für ein lokales Image und für ein Netzwerk

117
00:10:24,620 --> 00:10:31,810
nicht möglich ist Bild, also hier werde ich auf Stile zeigen. Bild und ich werde diesen Bildschlüssel dort vorerst zu meinem Stylesheet hinzufügen.

118
00:10:31,820 --> 00:10:37,790
Auch hier liegt es im Allgemeinen an Ihnen, wie Sie dies stylen, aber ich werde dies auf eine Breite

119
00:10:37,790 --> 00:10:38,750
von beispielsweise

120
00:10:38,750 --> 00:10:46,580
60% einstellen. Beachten Sie, dass das Gesamtprodukt eine Breite von 100%, aber eine Höhe von 60% hat, da das Gesamtprodukt Artikel hier hat eine

121
00:10:46,580 --> 00:10:52,730
Höhe von 300 und ich möchte das Bild dort haben, das auch den größten Teil der Höhe einnehmen sollte,

122
00:10:53,000 --> 00:10:58,520
aber ich habe auch den Titel und den Preis und meine Knöpfe und diese sollten auch dort

123
00:10:58,520 --> 00:10:59,920
passen, also ich '

124
00:11:00,020 --> 00:11:02,240
Geben Sie dem Bild 60% der Höhe,

125
00:11:02,360 --> 00:11:10,560
damit die anderen Dinge hier die restlichen 40% unter ihnen aufteilen können. Das ist also das Bild, jetzt ist das Bild natürlich

126
00:11:10,560 --> 00:11:16,230
nicht alles, was wir hier haben, wir haben auch unseren Titel, wir haben unseren Preis

127
00:11:16,230 --> 00:11:18,800
und ich möchte das auch stylen.

128
00:11:18,840 --> 00:11:24,980
Für den Titel füge ich hier den Titelstil und für den Preis einen Preisstil hinzu.

129
00:11:25,080 --> 00:11:32,490
Hier füge ich für diese Schaltflächen auch der umgebenden Ansicht einen Stil hinzu und benenne diesen Aktionen und

130
00:11:32,490 --> 00:11:41,020
natürlich all diese Stilnamen liegen wie immer ganz bei Ihnen. Hier möchte ich meinen Titel

131
00:11:41,050 --> 00:11:54,860
und den Preis und die Aktionseigenschaft hier und jetzt zu meinem Stylesheet hinzufügen. Für den Titel können Sie

132
00:11:54,860 --> 00:11:59,900
dies natürlich so gestalten, wie Sie möchten.

133
00:11:59,910 --> 00:12:01,970
Wir haben hier keine benutzerdefinierten Schriftarten,

134
00:12:02,070 --> 00:12:05,430
ich werde bald einige hinzufügen, aber im Moment werde ich

135
00:12:05,610 --> 00:12:11,610
das einfach ignorieren und mit einer Schriftgröße von 18 beginnen und einen vertikalen Rand hinzufügen, also oben und unten 3

136
00:12:11,610 --> 00:12:21,570
oder 4, also ein sehr kleiner Rand, aber immer noch ein gewisser Rand um diesen Titel. Für den Preis werde ich eine Schriftgröße von 14 festlegen,

137
00:12:21,840 --> 00:12:30,490
die etwas kleiner ist, und ich werde dieser auch eine Farbe geben, die vielleicht 888 sein sollte,

138
00:12:30,530 --> 00:12:34,380
was einer grauen, dunkelgrauen Farbe entspricht.

139
00:12:34,380 --> 00:12:39,760
Jetzt werden Aktionen in dieser Ansicht platziert, in der sich die Schaltflächen befinden. Daher möchte ich sicherstellen, dass

140
00:12:39,760 --> 00:12:42,450
die Schaltflächen nebeneinander liegen, also in einer Reihe.

141
00:12:42,670 --> 00:12:53,860
Daher gebe ich hier eine Flex-Richtung der Reihe an und begründe den Inhalt so, dass der gesamte verbleibende Abstand zwischen ihnen liegt.

142
00:12:53,860 --> 00:13:02,980
Außerdem möchte ich Elemente in der Mitte vertikal ausrichten, also entlang der Querachse, die für eine Flex-Richtung

143
00:13:02,980 --> 00:13:06,910
gilt der Reihe ist die vertikale Achse.

144
00:13:06,910 --> 00:13:08,890
Damit haben wir ein grundlegendes Styling. Lassen Sie

145
00:13:08,890 --> 00:13:14,920
uns nun diese Komponente verwenden, bevor wir das Setup und das Styling verfeinern. Die Produktartikelkomponente, die wir hier in die

146
00:13:14,920 --> 00:13:20,110
Produktartikeldatei exportieren, kann jetzt in der Produktübersichtsdatei verwendet werden, indem der

147
00:13:20,110 --> 00:13:22,850
Produktartikel von dort importiert wird.

148
00:13:22,870 --> 00:13:29,680
Zeigen wir also auf unseren Komponentenordner, dort auf den Shop-Unterordner und dann auf den Produktartikel und

149
00:13:29,680 --> 00:13:35,340
Dies ist das, was ich hier verwenden möchte, wenn ich meine Elemente rendere.

150
00:13:35,350 --> 00:13:40,300
Das Produktelement kann eine selbstschließende Komponente sein, da alle Daten über Requisiten und nicht zwischen den öffnenden

151
00:13:40,300 --> 00:13:42,650
und schließenden Tags empfangen werden. Jetzt müssen

152
00:13:42,670 --> 00:13:45,340
wir natürlich alle Dinge einrichten, die wir hier erwarten.

153
00:13:45,340 --> 00:13:50,700
Wir erwarten hier ein Bild, den Titel, den Preis und unsere beiden Event-Requisiten. Deshalb

154
00:13:50,710 --> 00:13:52,870
müssen wir das jetzt bereitstellen.

155
00:13:53,560 --> 00:13:55,390
Daher beginne ich hier mit dem

156
00:13:55,510 --> 00:14:02,140
Produkt mit dem Bild und das ist natürlich itemData. Artikel. imageUrl und Sie

157
00:14:02,140 --> 00:14:08,800
müssen sich immer an diese itemData erinnern. Artikelpunkte als Produkt, wie in unserem Produktmodell definiert, und daher

158
00:14:08,800 --> 00:14:11,910
wird eine imageUrl-Eigenschaft wie folgt geschrieben. Wenn Sie es anders

159
00:14:11,920 --> 00:14:17,980
geschrieben haben, müssen Sie natürlich anders darauf zugreifen. Neben dem Bild haben wir

160
00:14:17,980 --> 00:14:26,290
auch einen Titel, itemTata. Artikel. Titel und außerdem haben wir den Preis mit

161
00:14:26,320 --> 00:14:28,500
itemData. Artikel. Preis

162
00:14:28,510 --> 00:14:35,140
und dann haben wir unsere beiden Event-Handler hier, weil wir die On-View-Detail-Requisite und die

163
00:14:35,140 --> 00:14:41,470
On-Add-to-Cart-Requisite haben, die wir hinzufügen müssen. In der Ansicht werden Details später ausgeführt, im Moment ist es

164
00:14:41,890 --> 00:14:45,150
nur eine leere Funktion, und beim Hinzufügen zum Warenkorb wird später

165
00:14:45,160 --> 00:14:47,650
auch etwas ausgeführt. Im Moment kann es sich

166
00:14:47,650 --> 00:14:54,280
auch um eine leere Funktion handeln. So sollte unser Produktartikel gerendert werden. Wenn wir dies speichern, ist dies das,

167
00:14:54,320 --> 00:14:57,850
was Sie sehen sollten. Es ist noch nicht perfekt,

168
00:14:57,860 --> 00:15:01,640
aber wir kommen dorthin. Das ist eigentlich nicht schlecht.

169
00:15:01,700 --> 00:15:07,300
Jetzt fällt Ihnen natürlich auf, dass die Schaltflächen falsch gefärbt sind, dass dieser Bereich nicht so

170
00:15:07,300 --> 00:15:12,460
verwendet wird, wie er dort unten verwendet werden sollte, dass wir diesen Text vielleicht auch

171
00:15:12,460 --> 00:15:21,050
zentrieren möchten, aber das sind natürlich Dinge wir können daran arbeiten. Um dies zu verfeinern, beginnen wir hier in der Produktartikelkomponente

172
00:15:21,100 --> 00:15:23,900
mit unseren beiden Texten hier.

173
00:15:23,950 --> 00:15:30,790
Sie sollten natürlich zentriert sein, und das kann auf sehr einfache Weise geschehen, indem Sie diese mit

174
00:15:30,790 --> 00:15:37,200
einer Ansicht umschließen, diese beiden Texte dort hinein verschieben, dieser Ansicht einen Stil geben, und natürlich

175
00:15:37,250 --> 00:15:38,830
können Sie dies

176
00:15:38,840 --> 00:15:43,930
benennen, wie Sie möchten, ich werde es nennen Es enthält Details, da wir

177
00:15:44,090 --> 00:15:52,710
die Produktdetails dort so gestalten, dass ich meinen Detailstil hier zum Stylesheet hinzufüge und dort einfach die Mitte der Ausrichtungselemente festlegen werde.

178
00:15:52,880 --> 00:16:00,440
Dies verwendet eine Flex-Richtung der Säule, die Standardeinstellung, und zentriert sich daher auf der Querachse. Dies geschieht immer,

179
00:16:00,440 --> 00:16:04,870
aber die Querachse für die Flex-Richtungssäule ist natürlich von links

180
00:16:04,880 --> 00:16:12,920
nach rechts, sodass sie horizontal zentriert ist, was ich hier und ich möchte. Ich gebe auch eine Höhe von 15%.

181
00:16:12,930 --> 00:16:16,830
Denken Sie daran, dass das Bild 60% benötigt, also geben wir dies

182
00:16:16,830 --> 00:16:21,070
vielleicht 15%, also fast die Hälfte der verbleibenden 40%, nicht ganz die Hälfte.

183
00:16:21,270 --> 00:16:24,960
Und ich werde hier ein bisschen Polsterung von vielleicht 10 hinzufügen.

184
00:16:24,960 --> 00:16:31,780
Und für die Schaltflächen hier befinden sich diese in meiner Aktionseigenschaft. Dort möchte ich die Höhe

185
00:16:31,800 --> 00:16:36,340
auf die verbleibenden 25% einstellen. Dies sollte natürlich eine Zeichenfolge

186
00:16:36,550 --> 00:16:41,300
sein, da wir hier 60% Höhe haben, dann haben wir hier

187
00:16:41,460 --> 00:16:43,360
15%, daher hier

188
00:16:43,450 --> 00:16:50,860
Ich möchte die restlichen 25% behalten und wenn wir dies jetzt speichern, sieht das viel besser aus.

189
00:16:50,860 --> 00:16:54,360
Jetzt wäre ein gewisser Abstand links und rechts auch für

190
00:16:54,370 --> 00:17:01,810
die Schaltflächen hilfreich. In dieser Eigenschaft für den Aktionsstil füge ich einen horizontalen Abstand von 20 hinzu, sodass wir einen inneren Abstand

191
00:17:01,810 --> 00:17:05,230
links oder rechts haben. Um nun die Farbe

192
00:17:05,290 --> 00:17:10,540
der Schaltflächen zu ändern, können Sie einfach zu den Schaltflächenkomponenten gehen, die in

193
00:17:10,550 --> 00:17:12,140
React Native integriert sind,

194
00:17:12,170 --> 00:17:18,250
und die Farbrequisite hier auf Farben einstellen, die Sie daher aus dem Konstantenordner und aus

195
00:17:18,260 --> 00:17:19,530
der dortigen

196
00:17:19,630 --> 00:17:30,510
Farbdatei importieren müssen, und diese festlegen dann zu den primären Farben, auch hier für die zweite Farbe, die Schaltfläche zum Hinzufügen zum Warenkorb, die zweite Schaltfläche daher.

197
00:17:30,550 --> 00:17:32,220
Jetzt haben wir unsere Schaltflächen

198
00:17:32,320 --> 00:17:37,090
hier, fügen sie dem Warenkorb hinzu und zeigen Details an, und das sieht nicht schlecht aus.

199
00:17:37,120 --> 00:17:41,860
Die einzige verbleibende Sache, die Sie möglicherweise bemerken, ist, dass wir hier oben keine abgerundeten

200
00:17:41,860 --> 00:17:48,280
Ecken haben. Der Grund dafür ist, dass unser Bild im Grunde wie eine Überlagerung unseres Hintergrunds ist und der Hintergrund die

201
00:17:48,280 --> 00:17:49,570
umgebende Ansicht ist,

202
00:17:49,570 --> 00:17:53,800
das Bild hat keine abgerundete Ecken und daher überlappt es unsere abgerundeten Ecken, die

203
00:17:53,800 --> 00:17:57,350
wir auf der umgebenden Ansicht haben. Um dies zu beheben, können

204
00:17:57,520 --> 00:18:01,200
wir das Bild in eine separate Ansicht einbinden. Wie ich bereits

205
00:18:01,450 --> 00:18:05,580
im Kurs erwähnt habe, ist es in React Native wirklich normal, ein paar

206
00:18:05,580 --> 00:18:13,480
verschachtelte Ansichten zu haben, da wir dieser Ansicht jetzt einen Stil hinzufügen können, den wir vielleicht können Geben Sie eine Bildcontainer-ID an, die wir jetzt

207
00:18:14,080 --> 00:18:20,350
zu unserem Stylesheet hinzufügen können. Jetzt gebe ich diesem Bildcontainer hier und auf dem Bild meine Breite und Höhe. Daher

208
00:18:21,040 --> 00:18:24,850
füge ich nur eine Breite und Höhe von 100% hinzu, da er

209
00:18:24,850 --> 00:18:25,900
sich jetzt

210
00:18:25,950 --> 00:18:27,500
innerhalb von befindet Der Container,

211
00:18:27,520 --> 00:18:28,750
dies bezieht sich

212
00:18:28,750 --> 00:18:31,970
hier auf das übergeordnete Element, also auf diesen Container, sodass

213
00:18:32,110 --> 00:18:35,200
dann auch eine Höhe von 60% auf das Bild angewendet

214
00:18:35,200 --> 00:18:40,200
wird. Auf diesem Bildcontainer können wir jetzt einen oberen linken Radius von 10 und einen oberen

215
00:18:40,210 --> 00:18:42,020
Rand hinzufügen Der rechte Radius von

216
00:18:42,100 --> 00:18:48,520
10, damit wir diese Ecken abrunden und jetzt wichtig sind, fügt hier einen versteckten Überlauf hinzu, da dies sicherstellt, dass

217
00:18:48,520 --> 00:18:53,400
jedes Kind dort, das unser Bild ist, natürlich nicht überlappen kann, was wir hier eingerichtet haben.

218
00:18:53,410 --> 00:18:57,960
Mit diesem Setup fügen wir unsere abgerundeten Ecken hier oben wieder hinzu. Dies

219
00:18:57,970 --> 00:19:02,860
sind nun die Bildelemente, die ich hier haben möchte. Natürlich ist dies auch eine scrollbare Liste,

220
00:19:03,070 --> 00:19:08,110
in der Sie auch sehen, dass diese Bilder automatisch verzögert geladen werden und Sie weiterarbeiten können mit.

221
00:19:08,800 --> 00:19:13,270
Das nächste Ziel könnte natürlich sein, dass wir auch den Detailbildschirm anzeigen können.