1
00:00:02,300 --> 00:00:07,270
Um die einzelnen Elemente zu formatieren, werde ich erneut eine separate Komponente erstellen

2
00:00:07,350 --> 00:00:11,620
und sie als Mahlzeitelement bezeichnen. js, der Name

3
00:00:11,640 --> 00:00:15,320
liegt wie immer ganz bei Ihnen und Sie

4
00:00:15,320 --> 00:00:18,200
kennen das Spiel. Wir erstellen eine

5
00:00:18,440 --> 00:00:25,360
React-Komponente durch Importieren von React. Wir benötigen wahrscheinlich auch Ansicht, Text und Stylesheet und möglicherweise

6
00:00:25,460 --> 00:00:32,610
auch einige andere Dinge von React Native. Dann richten wir die Komponente Mahlzeit ein, wo wir Requisiten erhalten

7
00:00:32,610 --> 00:00:38,010
und wo wir am Ende etwas jsx zurückgeben. Richten Sie hier ein Stylesheet ein, speichern Sie es in einer Styles-Konstante

8
00:00:38,010 --> 00:00:46,090
mit Stylesheet create, an die wir ein Objekt übergeben, und exportieren Sie am Ende unser Mahlzeitelement hier als Standarddatei. Jetzt, da hier, in Mahlzeitelement, in dieser Komponente, müssen

9
00:00:46,090 --> 00:00:48,100
wir natürlich einen jsx-Code

10
00:00:48,100 --> 00:00:54,040
für dieses Mahlzeitelement zurückgeben, und das ist etwas, was ich vom Kategorie Mahlzeitbildschirm

11
00:00:54,040 --> 00:00:55,750
erhalte. Dort habe

12
00:00:55,810 --> 00:01:02,260
ich diese Ansicht mit meinem Text hier, das ist am Ende, was ich ausgeben möchte, ein bisschen komplexer als das, aber ich

13
00:01:02,710 --> 00:01:07,150
werde es von dort ausschneiden und es zu Mahlzeitelement verschieben und dort, diese Ansicht hier

14
00:01:07,150 --> 00:01:12,380
aber von zurückgeben Natürlich sind wir damit nicht fertig. Zum einen sollte dies auch berührbar sein,

15
00:01:12,380 --> 00:01:17,390
da wir eine Mahlzeit auswählen können. Wir können ein solches Rezept auswählen, das auf

16
00:01:17,390 --> 00:01:21,010
den Detailbildschirm übertragen werden soll, sodass ich berührbare Deckkraft importiere.

17
00:01:21,020 --> 00:01:25,910
Jetzt können Sie diese Unterscheidung natürlich wieder vornehmen und den Ripple-Effekt mit berührbarem nativem

18
00:01:25,970 --> 00:01:27,880
Feedback auf Android verwenden,

19
00:01:27,920 --> 00:01:35,270
wenn Sie möchten. Ich werde vorerst mit berührbarer Deckkraft arbeiten und meine Ansicht hier mit berührbarer Deckkraft umschließen, damit wir dies können

20
00:01:35,420 --> 00:01:44,350
Tippen Sie hier und onPress auf unseren Artikel. Ich möchte tatsächlich eine Funktion auslösen, die ich für eine Eigenschaft erwarte, die wir noch nicht an den Artikel

21
00:01:44,350 --> 00:01:49,000
übergeben, aber weil wir den Artikel noch nirgendwo verwenden, aber ich werde Pass in

22
00:01:49,000 --> 00:01:54,460
der Zukunft auf, vielleicht nennen wir dies bei ausgewählten Mahlzeiten oder nur bei Auswahl, was auch

23
00:01:54,460 --> 00:02:00,820
immer Sie wollen, ich werde es bei Auswahl von Mahlzeit benennen und ich erwarte, dass diese Requisite auf dem

24
00:02:00,820 --> 00:02:06,950
Mahlzeitartikel steht, wenn wir sie dann in jsx verwenden. Das ist also die berührbare Deckkraft,

25
00:02:08,790 --> 00:02:16,050
da habe ich meine Ansicht mit dem Titel und eigentlich sollte diese Ansicht etwas komplexer sein.

26
00:02:16,740 --> 00:02:24,150
Ich möchte eine Ansicht haben, eine verschachtelte Ansicht wie diese und eine andere Ansicht darunter, also möchte ich

27
00:02:24,180 --> 00:02:25,530
zwei Zeilen haben.

28
00:02:25,530 --> 00:02:31,060
Dies wird als Spalte eingerichtet, aber diese beiden Ansichten hier werden hier als Zeilen eingerichtet.

29
00:02:31,230 --> 00:02:38,280
In der ersten Ansicht sollte auch ein Hintergrundbild gerendert werden, sodass der Titel vor diesem Hintergrundbild angezeigt

30
00:02:38,310 --> 00:02:39,130
wird.

31
00:02:39,180 --> 00:02:44,730
In der zweiten Ansicht sollte in der zweiten Zeile einige Details zum ausgewählten Rezept

32
00:02:44,730 --> 00:02:47,270
wie Komplexität und Dauer wiedergegeben werden.

33
00:02:50,190 --> 00:02:55,530
Beginnen wir also damit, bevor wir das Bild später hinzufügen. In beiden Ansichten

34
00:02:55,560 --> 00:03:00,660
füge ich daher die Stileigenschaft hinzu und zeige auf die Stilmahlzeit oder wie

35
00:03:03,050 --> 00:03:08,860
auch immer Sie dies benennen möchten, da dies eine Zeile in meiner Essenspräsentation hier

36
00:03:10,030 --> 00:03:18,140
und ich sein wird Ich werde daher dort unten eine Mahlzeitreihe hinzufügen und die Flexrichtung hier natürlich auf Zeile setzen,

37
00:03:18,140 --> 00:03:23,150
da dies Datenzeilen sein sollten. Um das Gesamtelement hier herum

38
00:03:23,170 --> 00:03:27,290
werde ich nun eine andere Ansicht einschließen, in der ich

39
00:03:30,050 --> 00:03:34,850
einen allgemeinen Stil für Stile, Mahlzeitelemente und Mahlzeitelemente einrichten möchte, der

40
00:03:34,850 --> 00:03:40,670
natürlich auch hier im Stylesheet konfiguriert ist, und dort möchte ich jeder Mahlzeit eine

41
00:03:40,700 --> 00:03:46,940
Höhe geben von 200 sagen wir, jedes Element in der Liste hier und eine Breite

42
00:03:46,940 --> 00:03:55,390
von 100%, um die volle verfügbare Breite und vielleicht auch eine Hintergrundfarbe dieses gräulichen Aussehens hier zu nehmen, können wir sehen,

43
00:03:55,430 --> 00:04:00,570
ob wir das behalten wollen, für den Moment werde ich verwende das.

44
00:04:00,810 --> 00:04:04,770
Jetzt können wir das Mahlzeitelement hier verwenden und wir sind noch

45
00:04:04,770 --> 00:04:14,560
nicht damit fertig, aber wir können es hier in der Kategorie Mahlzeitenbildschirm verwenden, indem wir es natürlich importieren, das Mahlzeitelement aus dem Komponentenordner und dort aus der

46
00:04:14,560 --> 00:04:25,230
Mahlzeitelementdatei importieren und dann rendern Sie dies hier, also geben Sie den Artikel hier wie folgt zurück, und natürlich müssen wir jetzt einige Daten übergeben, Daten wie den Titel,

47
00:04:25,230 --> 00:04:32,010
den wir von itemData erhalten. Artikel. Titel und die onSelect-Requisite, die

48
00:04:32,010 --> 00:04:38,850
ich in dem Essensartikel erwarte, den wir am Ende mit der onPress-Requisite onSelectMeal der berührbaren Deckkraft verbinden,

49
00:04:38,850 --> 00:04:42,840
das war der Name, den ich gewählt habe. Das müssen

50
00:04:42,840 --> 00:04:44,030
wir auch

51
00:04:44,070 --> 00:04:46,820
hier einrichten, wenn wir die Mahlzeit verwenden

52
00:04:46,830 --> 00:04:51,330
item und dies sollte auf eine Funktion verweisen, die im Moment

53
00:04:51,330 --> 00:04:55,090
nichts tut, aber später die Detailseite für diese Mahlzeit lädt.

54
00:04:55,110 --> 00:05:00,300
Jetzt erhalten wir den Titel auf der Titelrequisite, daher das Essen, hier, wenn wir den Titel ausgeben, tun wir dies mit Hilfe

55
00:05:00,300 --> 00:05:01,590
von Requisiten. Titel.

56
00:05:01,740 --> 00:05:09,260
Wenn wir das jetzt speichern, sollten wir hier tatsächlich etwas sehen können, also warten wir, bis es wieder geladen ist, und

57
00:05:09,260 --> 00:05:10,580
ja, wir sehen

58
00:05:10,580 --> 00:05:16,730
unser Essen hier und sicherlich nicht zu schön, aber zumindest sehen wir ein bisschen mehr als zuvor.

59
00:05:16,730 --> 00:05:21,620
Was ich hier haben möchte, ist ein kleiner Abstand um die Liste, aber innerhalb

60
00:05:21,710 --> 00:05:26,930
des Abstands sollte das Listenelement die volle verfügbare Breite annehmen und nicht nur die Breite des

61
00:05:26,930 --> 00:05:28,850
breitesten Elements, das gerade passiert.

62
00:05:29,090 --> 00:05:35,800
Dazu können wir zur FlatList gehen und dort die style-Eigenschaft hinzufügen und diese Breite auf 100% setzen, um sicherzustellen, dass die

63
00:05:35,810 --> 00:05:39,470
FlatList selbst die gesamte Breite annimmt, die sie erhalten kann.

64
00:05:39,470 --> 00:05:42,020
Damit sollten wir schauen müssen, was wir hier wollen.

65
00:05:42,290 --> 00:05:44,710
Jetzt sind die Mahlzeiten natürlich nicht fertig, sie sehen nicht so aus,

66
00:05:44,720 --> 00:05:51,380
wie ich sie haben möchte, obwohl wir auch langsam dort ankommen. Jetzt im MealItem. js Datei, wir haben noch

67
00:05:51,380 --> 00:05:53,680
einige Arbeiten zu erledigen, zum Beispiel wird

68
00:05:53,690 --> 00:05:59,840
diese Ansicht hier mit dem Titel später auch das Bild enthalten und daher sollte diese viel größer

69
00:05:59,840 --> 00:06:03,960
sein als die Zeile darunter, die später nur einige Details ausgibt.

70
00:06:05,500 --> 00:06:18,310
Daher werde ich hier meine Essensreihenstile mit einem anderen Stilobjekt zusammenführen, also mit dem Stil, der in einem anderen Stylesheet-Objekt eingerichtet ist, das ich als Essenskopf

71
00:06:18,350 --> 00:06:26,530
oder wie auch immer Sie es benennen möchten, und das gleiche dort unten übrigens für die

72
00:06:26,530 --> 00:06:29,090
Details Am Ende werde ich

73
00:06:29,110 --> 00:06:36,920
dies mit Stilmahlzeitdetails zusammenführen, so dass wir Stile kombiniert haben und mit dem Essenskopf beginnen, den

74
00:06:36,920 --> 00:06:39,470
wir hier einrichten können.

75
00:06:39,470 --> 00:06:47,090
Der Header der Mahlzeit am Ende enthält das Bild und auch den Titel, und ich möchte, dass

76
00:06:47,410 --> 00:06:49,580
die Höhe davon 80%

77
00:06:49,580 --> 00:06:59,550
der verfügbaren Höhe beträgt, daher sollte diese sehr, sehr groß sein. Die Essensdetails erhalten daher automatisch die restlichen 20%. Um zu sehen,

78
00:06:59,550 --> 00:07:07,470
ob dies funktioniert, geben wir hier einige Details aus. In dieser Ansicht hier, in dieser Zeile unter

79
00:07:07,470 --> 00:07:10,020
unserer Titelzeile, möchte ich auch hier

80
00:07:10,020 --> 00:07:13,420
und da einen Text haben Lassen Sie

81
00:07:13,440 --> 00:07:21,920
uns sagen, Requisiten Dauer und dann m danach für Minuten, weil m Dauer eine Zahl ist, die wir als

82
00:07:21,920 --> 00:07:23,330
Minuten behandeln.

83
00:07:23,330 --> 00:07:27,740
Wir müssen natürlich nur die Dauer aus dem Bildschirm "Kategorie Mahlzeiten" übergeben. Wenn

84
00:07:27,740 --> 00:07:33,140
wir also den Mahlzeitartikel verwenden, setze ich neben der Übergabe eines Titels die Dauer-Requisite, da wir dies

85
00:07:33,140 --> 00:07:34,940
jetzt für den Mahlzeitartikel erwarten.

86
00:07:34,940 --> 00:07:40,700
Wir erhalten dies von itemData. Artikel, der unsere Mahlzeit ist, und dort haben

87
00:07:40,760 --> 00:07:45,630
wir eine Dauer-Eigenschaft, da unsere Mahlzeiten, wie im Modell hier definiert, eine Dauer-Eigenschaft haben.

88
00:07:45,800 --> 00:07:50,690
Wenn Sie sich die Dummy-Daten ansehen, ist dies hier Ihre Dauer, die eingegeben wird .

89
00:07:54,760 --> 00:07:56,560
Wenn wir dies

90
00:07:56,560 --> 00:08:06,850
speichern, sehen wir jetzt unsere Dauer dort unten und tatsächlich können wir diese Höhe hier immer noch auf sogar 90% ändern, sollte höher sein

91
00:08:06,910 --> 00:08:09,420
als hier, das sieht besser aus

92
00:08:09,430 --> 00:08:10,630
und natürlich

93
00:08:10,750 --> 00:08:14,830
können Sie auch damit experimentieren. In der Zeile mit

94
00:08:14,830 --> 00:08:22,680
den Essensdetails möchte ich auch eine horizontale Polsterung haben, also links und rechts von beispielsweise 10 und

95
00:08:22,690 --> 00:08:32,650
meinen Inhalt hier mit einem Abstand dazwischen begründen. Denken Sie daran, dass es sich um eine Zeile handelt, damit dies horizontal gerechtfertigt ist

96
00:08:32,650 --> 00:08:35,690
mehrere Artikel, werden sie dort schön verteilt.

97
00:08:35,740 --> 00:08:45,740
Wir haben also 20 Minuten Zeit, geben wir dort weitere Informationen aus, indem wir einen weiteren

98
00:08:45,900 --> 00:08:47,030
Text

99
00:08:47,030 --> 00:08:53,140
hinzufügen, und geben dort die Komplexität aus. Hier gebe ich

100
00:08:53,140 --> 00:09:01,950
die Komplexität aus und anschließend die Erschwinglichkeit. Jetzt müssen wir nur noch diese Daten eingeben, wenn wir unseren Mahlzeitartikel erstellen.

101
00:09:01,990 --> 00:09:06,460
Hier übergeben wir also neben der Dauer die Komplexität,

102
00:09:06,460 --> 00:09:16,420
die wir hier erhalten, itemData. Artikel. Komplexität und Erschwinglichkeit, das sind natürlich

103
00:09:16,430 --> 00:09:18,530
itemData. Artikel. Erschwinglichkeit, so

104
00:09:18,740 --> 00:09:28,910
und wenn wir dies speichern und neu rendern lassen, sehen wir jetzt diese Ausgabe hier. Immer noch nicht super schön und wir können dies

105
00:09:29,000 --> 00:09:37,390
definitiv verbessern, aber einen schönen Start. Jetzt einfach und erschwinglich oder unsere Komplexität und Erschwinglichkeit

106
00:09:37,390 --> 00:09:45,000
daher, sollte das etwas anders gestaltet werden. Wir wissen, dass es sich um Text handelt,

107
00:09:45,000 --> 00:09:51,680
und daher kann ich einige Javascript-Funktionen oder -Methoden verwenden, die wir für Zeichenfolgen zur

108
00:09:51,770 --> 00:09:59,930
Verfügung haben. Ich werde einfach toUppercase verwenden, um es vollständig in Großbuchstaben umzuwandeln, und jetzt sollte dies bereits

109
00:09:59,930 --> 00:10:06,590
ein bisschen besser aussehen als zuvor. Jetzt können Sie das Styling hier noch optimieren. Ich werde dieses Styling

110
00:10:06,620 --> 00:10:09,440
hier erst einmal anwenden und jetzt ein Hintergrundbild oben hinzufügen.

111
00:10:09,440 --> 00:10:16,370
Aus diesem Grund wollten wir ein Hintergrundbild hinter diesem Titeltext und dankenswerterweise macht React Native

112
00:10:16,370 --> 00:10:23,930
das Hinzufügen eines solchen Hintergrundbilds wirklich sehr einfach. React Native wird mit einer integrierten Komponente geliefert, der

113
00:10:23,990 --> 00:10:29,690
Bildhintergrundkomponente, mit der wir ein Bild im Hintergrund rendern können, wie Sie es

114
00:10:29,690 --> 00:10:36,020
sich unter dem Namen vorstellen würden. Sie fügen es neben der Komponente hinzu, hinter der Sie es hinzufügen möchten, und Sie fügen es vor dieser

115
00:10:36,020 --> 00:10:43,520
Komponente hinzu. Hier füge ich also einen Bildhintergrund hinzu und auf dem Bildhintergrund wie auf dem normalen Bild legen Sie eine Quelle fest. Hier ist meine Quelle ein Webbild, also übergeben wir ein Objekt. Wenn

116
00:10:43,520 --> 00:10:49,220
es ein lokales Bild wäre, würden Sie require verwenden und was Sie früher im Kurs über lokale Bilder

117
00:10:49,220 --> 00:10:54,380
gelernt haben, aber hier ist es ein Webbild, also übergeben wir ein Objekt mit einer URI-Requisite

118
00:10:54,380 --> 00:11:00,560
und dort verwenden wir ein Requisitenbild. Dort erwarte ich, dass diese URL in dieser Komponente angezeigt wird. Daher müssen wir

119
00:11:00,560 --> 00:11:07,370
natürlich sicherstellen, dass wir die URL für diese Requisite übergeben. Ich werde hier auch etwas

120
00:11:07,370 --> 00:11:15,000
Styling hinzufügen und das werden Styles sein. bgImage, das wir jetzt dort unten zum Stylesheet hinzufügen, wo

121
00:11:15,720 --> 00:11:22,110
immer Sie wollen, vielleicht hier, spielt keine Rolle. Eine wichtige Sache hier ist, dass Sie Breite und Höhe

122
00:11:22,110 --> 00:11:27,060
einstellen müssen, da es sich um ein Bild aus dem Web handelt, und ich werde sie

123
00:11:27,060 --> 00:11:36,350
zu 100% für beide verwenden, da es den gesamten Raum ausfüllen soll, den es erhält. Jetzt müssen wir nur noch sicherstellen, dass wir diese Bild-Requisite hier in der Kategorie Mahlzeiten-Bildschirm übergeben.

124
00:11:36,440 --> 00:11:45,560
Neben dem Titel möchte ich hier auch itemData übergeben. Artikel. imageUrl ist der Name davon. Sie können das im

125
00:11:45,560 --> 00:11:51,020
Modell imageUrl sehen. Das geben wir also weiter und geben es an die Image-Requisite weiter, weil wir

126
00:11:51,020 --> 00:11:56,960
das erwarten und hier im Essen einstellen Artikel. Und wenn Sie das jetzt speichern und die

127
00:11:56,970 --> 00:12:02,910
Dinge durcheinander bringen und auf Android testen, dauert das Laden etwas länger, weshalb ich hier normalerweise iOS

128
00:12:03,000 --> 00:12:10,410
verwende. Wenn wir dies jetzt testen, sehen wir hier unseren Burger. Was wir aber nicht

129
00:12:10,410 --> 00:12:19,010
mehr sehen, ist unser Titel. Um den Titel erneut anzuzeigen, stellen Sie sicher, dass

130
00:12:19,010 --> 00:12:27,480
Sie den Bildhintergrund tatsächlich um ihn wickeln. Auf diese Weise teilen Sie React Native mit, welcher Inhalt

131
00:12:27,480 --> 00:12:34,320
sich über diesem Hintergrundbild befinden soll. Hier ist also unser Titel, der nicht so einfach zu lesen ist, und wir werden das beheben, aber er ist wieder da.

132
00:12:35,480 --> 00:12:41,050
Also fangen wir hier mit diesem Rezept an. Stellen wir jetzt sicher, dass der Titel

133
00:12:41,050 --> 00:12:50,760
etwas leichter zu sehen ist, indem wir ihm hier einen Stil geben, einen Stiltitel, den wir jetzt dort unten einrichten können, und ich möchte eine offene

134
00:12:50,850 --> 00:12:52,210
Schriftfamilie festlegen Sans

135
00:12:52,220 --> 00:12:55,490
Bold, macht Sinn, da wir diese Schriftart registrieren.

136
00:12:55,590 --> 00:12:59,380
Geben Sie ihm eine Schriftgröße, die wir ein wenig erhöhen, vielleicht 22,

137
00:12:59,400 --> 00:13:01,310
damit können Sie natürlich herumspielen.

138
00:13:01,440 --> 00:13:07,380
Geben Sie ihm eine weiße Farbe, um das Lesen zu erleichtern, und weisen Sie ihm auch eine Hintergrundfarbe zu,

139
00:13:07,380 --> 00:13:10,600
damit wir sie immer sehen können, auch wenn das Hintergrundbild

140
00:13:10,620 --> 00:13:16,800
weiß wäre. In diesem Fall wäre weißer Text schwer zu lesen Dies ist eine RGBA-Farbe, die sozusagen eine eingebaute

141
00:13:16,800 --> 00:13:22,380
Transparenz hat, und dies ist einfach eine schwarze Farbe, die ein bisschen transparent ist und jetzt auch

142
00:13:25,490 --> 00:13:28,400
hier ein bisschen Polsterung hinzufügt. Die vertikale Polsterung

143
00:13:28,390 --> 00:13:35,000
von fünf sollte gut aussehen, damit die Das farbige Hintergrundfeld hier befindet sich nicht direkt an den Rändern des Textes, der

144
00:13:35,000 --> 00:13:42,950
sich innerhalb des Felds befindet, und wird möglicherweise horizontal mit 12 aufgefüllt. Damit sollten wir immer unseren Titel sehen

145
00:13:42,950 --> 00:13:48,540
und tatsächlich können wir diese Transparenz hier wahrscheinlich erhöhen, die

146
00:13:48,560 --> 00:13:51,790
Deckkraft verringern, ja, das sieht

147
00:13:51,890 --> 00:13:53,630
ein bisschen

148
00:13:59,550 --> 00:14:06,420
schöner aus, denke ich, so. Und das Einzige, was ich jetzt tun möchte, ist,

149
00:14:06,420 --> 00:14:10,250
dass ich diesen Titel am unteren Rand dieses Bildes nach

150
00:14:12,450 --> 00:14:23,230
unten verschieben möchte. Daher setze ich für den bgImage-Stil, den ich hier habe, den Rechtfertigungsinhalt auf flex end, da das Hintergrundbild automatisch als fungiert Eine Flexbox sozusagen

151
00:14:23,230 --> 00:14:27,970
wie eine Ansicht, damit wir unseren Inhalt dort rechtfertigen können und jetzt

152
00:14:27,970 --> 00:14:30,400
haben wir diesen Titel unten.

153
00:14:30,430 --> 00:14:39,460
Wir könnten den Text jetzt auch zentrieren, indem wir hier zum Titel gehen und das Textausrichtungszentrum hinzufügen. Falls er zu lang und zu groß

154
00:14:39,580 --> 00:14:42,210
ist, können Sie natürlich auch die

155
00:14:42,310 --> 00:14:46,400
Schriftgröße verkleinern, was ich natürlich auf 20 tun werde Gehen Sie

156
00:14:46,420 --> 00:14:53,080
zu diesem Text hier, wo Sie einen Titel ausgeben und die Anzahl der Zeilen auf 1 setzen.

157
00:14:53,080 --> 00:14:55,870
Dadurch wird sichergestellt, dass der Text automatisch

158
00:14:55,870 --> 00:15:06,780
gekürzt wird, wenn er zu groß ist, wie hier für den Salat mit Kirschtomaten. Wir sehen hier auch unter iOS einen seltsamen Effekt, bei

159
00:15:06,880 --> 00:15:15,150
dem wir einen zusätzlichen Hintergrund hinter unserem Text haben und nicht nur das hintergrundfarbene Feld hier.

160
00:15:15,160 --> 00:15:22,880
Das liegt daran, dass ich meine Hintergrundfarbe und so weiter direkt auf den Text angewendet habe. Um dies zu beheben, können

161
00:15:22,880 --> 00:15:29,510
wir sie hier aus dem Titel ausschneiden und nur die Farbe usw. dort einrichten und stattdessen hier

162
00:15:29,540 --> 00:15:37,100
einen Titelcontainer hinzufügen, in dem wir diese Hintergrundfarbe hinzufügen und so weiter und wickeln Sie diesen Container um unseren Titel,

163
00:15:37,120 --> 00:15:42,580
also fügen wir hier eine zusätzliche Ansicht hinzu, und es ist in React Native

164
00:15:42,580 --> 00:15:51,580
ganz normal, mehrere solcher Ansichten zu verschachteln. In dieser Ansicht können wir jetzt Stil, Stile, Titelcontainer hinzufügen, und wenn wir das speichern, Wir sollten

165
00:15:51,580 --> 00:15:52,860
dieses seltsame

166
00:15:52,900 --> 00:15:55,590
Verhalten unter iOS loswerden. Ja, jetzt haben

167
00:15:55,600 --> 00:16:00,380
wir dort keine zusätzliche Box, sondern nur eine Hintergrundfarbe und dieselbe unter Android.

168
00:16:00,520 --> 00:16:04,270
Das sieht jetzt nicht schlecht aus, aber ich bin nicht ganz

169
00:16:04,270 --> 00:16:10,480
glücklich. Ich möchte meine Details auch hier vertikal zentrieren und ein bisschen mehr Platz geben, denke ich, und dafür können

170
00:16:10,480 --> 00:16:17,560
wir dem Header vielleicht 85% geben Beachten Sie bei der Höhe und den Details der Mahlzeit hier, dass unsere Flexrichtung die Reihe

171
00:16:17,560 --> 00:16:23,650
ist, da wir hier die Reihen der Mahlzeiten und die Details der Mahlzeiten zusammenführen und daher unsere Querachse von

172
00:16:23,670 --> 00:16:26,080
oben nach unten verläuft. Wenn wir also

173
00:16:26,080 --> 00:16:30,540
vertikal zentrieren möchten, ist dies der Fall die Querachse, auf der wir zentrieren müssen.

174
00:16:30,550 --> 00:16:37,540
Hier können wir also Ausrichtungselemente festlegen, bei denen die Querachsenpositionierung zentriert wird, und hier auch

175
00:16:37,540 --> 00:16:43,280
unsere Farbe ein wenig in eine etwas schönere Farbe ändern. Dieses sehr

176
00:16:43,510 --> 00:16:49,170
hellgraue # f5f5f5 sieht möglicherweise etwas besser aus, ja, das tut es

177
00:16:49,300 --> 00:16:50,800
definitiv .

178
00:16:50,800 --> 00:16:56,610
Um sicherzustellen, dass wir wirklich vertikal zentrieren, müssen wir nur genauer angeben, wie hoch unsere

179
00:16:56,650 --> 00:16:58,660
Mahlzeitendetails sein sollen. Wir nehmen

180
00:17:03,480 --> 00:17:09,590
85% für die Kopfzeile, sodass wir für die Details hier offensichtlich eine Höhe von 15% festlegen können

181
00:17:09,600 --> 00:17:17,230
um den Rest zu erledigen, ja, und ich würde sagen, das sieht hier ziemlich anständig aus. Listen Sie auf jeden Fall

182
00:17:17,420 --> 00:17:20,620
Elemente auf, mit denen wir hier arbeiten können.

183
00:17:20,630 --> 00:17:25,670
Ich werde jetzt nur einen kleinen Randradius hinzufügen, weil Sie wissen, dass ich Randradien

184
00:17:25,670 --> 00:17:33,500
mag, also werde ich hier einen Randradius von 10 hinzufügen, damit wir einige abgerundete Ecken haben, und damit, wenn Sie zurückgehen, '

185
00:17:33,500 --> 00:17:38,820
Sie sind fast da, aber Sie werden feststellen, dass das Bild den Randradius nicht berücksichtigt.

186
00:17:38,870 --> 00:17:46,780
Um das zu beheben, müssen wir auf dem Essensartikel nur "Überlauf versteckt" sagen, damit kein untergeordneter Artikel diesen Raum oder diese

187
00:17:46,780 --> 00:17:49,130
Form, die wir hier bauen, verlassen

188
00:17:49,130 --> 00:17:49,910
kann.

189
00:17:53,550 --> 00:17:56,880
Und damit ist das ein Anfang, etwas, mit dem wir arbeiten

190
00:17:56,880 --> 00:18:02,070
können. Jetzt wollen wir natürlich sicherstellen, dass wir, wenn wir auf ein solches Element tippen, tatsächlich zur Detailseite gehen.