1 00:00:02,420 --> 00:00:06,140 Konzentrieren wir uns also zunächst auf den Bildschirm mit den Essensdetails, 2 00:00:06,170 --> 00:00:06,770 also 3 00:00:09,660 --> 00:00:13,950 auf den Teil hier, in dem wir die Details des ausgewählten Rezepts anzeigen. 4 00:00:14,070 --> 00:00:19,590 Im Moment haben wir nur den Dummy-Inhalt des Essensdetailbildschirms und das ist natürlich nicht der Inhalt, 5 00:00:19,590 --> 00:00:21,810 den ich wirklich dort haben möchte, sondern 6 00:00:22,020 --> 00:00:24,190 was sollte dort drin sein? 7 00:00:24,210 --> 00:00:30,280 Wenn wir uns unser Essensmodell ansehen, ist es wahrscheinlich sinnvoll, das Bild dort zu haben. Bitte denken Sie 8 00:00:30,330 --> 00:00:35,340 daran, dass der Titel bereits in unserer Kopfzeile angezeigt wird. Daher ist es sinnvoll, 9 00:00:35,340 --> 00:00:43,710 das Bild hier oben und vielleicht zu haben Darunter wiederholen Sie vielleicht noch einmal die Dauer, Erschwinglichkeit und Komplexität, so wie wir es hier 10 00:00:43,710 --> 00:00:47,140 unter unserem Rezept tun, und listen Sie auch darunter 11 00:00:47,370 --> 00:00:56,730 alle Zutaten und die Schritte auf, die zur Herstellung dieses Gerichts erforderlich sind. Das ist am Ende das, was ich auf dieser Seite 12 00:00:56,730 --> 00:01:02,170 hier auf dem MealDetailScreen haben möchte, und daher halte ich es für 13 00:01:02,340 --> 00:01:08,220 sinnvoll, zunächst eine Bildlaufansicht hinzuzufügen, da wir dort sicherlich eine Menge Inhalte haben werden, 14 00:01:08,220 --> 00:01:15,340 die höchstwahrscheinlich nicht vorhanden sind passen auf einen Bildschirm und schon gar nicht auf alle möglichen Gerätegrößen. 15 00:01:15,390 --> 00:01:22,320 Also werde ich hier eine Bildlaufansicht hinzufügen und diese hier um meinen Inhalt wickeln. 16 00:01:22,330 --> 00:01:24,920 Jetzt haben wir hier ein 17 00:01:25,030 --> 00:01:30,750 paar verschiedene Abschnitte, zum Beispiel ganz oben, ich möchte mein Bild haben und dafür 18 00:01:30,750 --> 00:01:36,300 werde ich auch die Bildkomponente aus React Native hier importieren, damit wir hier ein 19 00:01:36,300 --> 00:01:39,030 Bild rendern können, nicht ein Hintergrundbild, aber 20 00:01:39,270 --> 00:01:45,260 ein normales Bild, und ich möchte dies hinzufügen, sagen wir hier ganz oben, so etwas. 21 00:01:45,260 --> 00:01:51,390 Jetzt nach dem Bild möchte ich eine Ansicht mit der Dauer, Erschwinglichkeit und Komplexität haben, die ich erwähnt habe, also im 22 00:01:51,400 --> 00:01:57,930 Grunde das gleiche Setup, das wir in der Mahlzeit haben, das könnte man hier sagen, und deshalb werde ich die Ansicht tatsächlich 23 00:01:57,930 --> 00:02:03,330 von dort kopieren und dann können wir es anpassen, wie wir es hier im MealDetailScreen brauchen, also 24 00:02:03,360 --> 00:02:06,220 werde ich diese Ansicht einfach durch die Kopieransicht ersetzen. 25 00:02:06,360 --> 00:02:10,510 Dazu müssen wir natürlich die Standardtextkomponente hier importieren. 26 00:02:10,710 --> 00:02:11,700 Fügen 27 00:02:11,720 --> 00:02:16,370 wir dies hinzu und importieren wir den Standardtext aus 28 00:02:16,610 --> 00:02:21,450 dem Standardtext der Komponenten. Das ist also die nächste Zeile 29 00:02:21,500 --> 00:02:26,580 und danach möchte ich meine Zutaten und die Schritte haben, die Sie ausführen müssen. 30 00:02:26,890 --> 00:02:39,790 Also können wir hier Text hinzufügen, wo wir Zutaten sagen, und dort möchte ich auch einen Stil anwenden, wie Stile, Titel, so etwas oder nur Titel, 31 00:02:39,820 --> 00:02:42,910 weil ich hier eine fette 32 00:02:45,630 --> 00:02:52,320 Überschrift haben möchte, vielleicht die Schriftgröße erhöhen. Darunter haben Sie meine Liste der Zutaten, also Liste 33 00:02:52,320 --> 00:02:58,770 der Zutaten und das ist natürlich nicht der endgültige Inhalt, stattdessen werden wir hier eine Liste 34 00:02:58,770 --> 00:03:07,260 rendern und darunter werde ich dies hier wiederholen, weil ich dann einen Titel haben möchte, wo ich sage Schritte und dann eine 35 00:03:07,980 --> 00:03:14,760 Liste von Schritten darunter und jetzt werde ich diesen alten Inhalt dort unten los und damit möchte 36 00:03:14,760 --> 00:03:15,940 ich arbeiten. 37 00:03:15,960 --> 00:03:20,790 Jetzt fehlen natürlich alle Stile und auch die Requisiten-Dauer und so weiter, was 38 00:03:20,790 --> 00:03:26,080 nichts bringt. Stattdessen müssen wir hier mit der ausgewählten Mahlzeit, der ausgewählten Mahlzeit-Dauer, der ausgewählten 39 00:03:26,130 --> 00:03:34,560 Mahlzeit-Komplexität, der ausgewählten Mahlzeit-Erschwinglichkeit und für das Image arbeiten Zum Beispiel möchte ich hier eine Quelle hinzufügen, da die Quelle ein Netzwerkbild ist und 40 00:03:34,590 --> 00:03:42,210 ein Objekt mit einer URI-Eigenschaft ist, die auf selectedMeal zeigt. imageUrl, um dies zu laden, und wir müssen dort 41 00:03:42,240 --> 00:03:47,210 auch einen Stil anwenden, um eine Breite und eine Höhe festzulegen. Hier 42 00:03:47,310 --> 00:03:53,190 möchte ich also auf Stile zeigen. Bild sagen wir, und all diese Stile fehlen, 43 00:03:53,190 --> 00:04:02,470 wie gesagt, also fügen wir das hinzu. Hier für diesen Stil möchte ich auch Stile sagen. Details vielleicht, weil wir die Details dieses 44 00:04:02,470 --> 00:04:08,680 Rezepts anzeigen und wir zum Stylesheet gehen. Entfernen Sie daher den Bildschirm, den wir nicht 45 00:04:08,680 --> 00:04:09,340 mehr 46 00:04:09,520 --> 00:04:16,920 benötigen. Stattdessen fügen wir Bild und Details hinzu. Für Details müssen wir nun die Flexrichtung auf Zeile setzen, da dies 47 00:04:16,920 --> 00:04:19,180 alle Details in einer Zeile sein sollten. 48 00:04:19,380 --> 00:04:27,060 Wir können ein wenig Polsterung in alle Richtungen von vielleicht 15 hinzufügen und auch einen begründeten 49 00:04:27,120 --> 00:04:33,550 Platzinhalt hinzufügen, um unsere Detailelemente hier schön zu verteilen, das sollte gut sein. 50 00:04:35,210 --> 00:04:42,270 Darüber hinaus müssen wir auf dem Bild hier auch einen Stil hinzufügen. Dort sollte die Breite 100% betragen. Nehmen wir 51 00:04:42,440 --> 00:04:48,100 an, um die volle verfügbare Breite zu erhalten, und für die Höhe gehe ich mit 52 00:04:48,140 --> 00:04:49,580 200, obwohl Sie 53 00:04:49,580 --> 00:04:54,680 das natürlich könnten Berechnen Sie dies dynamisch mit der Dimensions-API, um beispielsweise immer einen 54 00:04:54,740 --> 00:05:00,720 bestimmten Bruchteil der verfügbaren Höhe zu übernehmen, oder spielen Sie hier einfach mit anderen Werten herum. 55 00:05:00,890 --> 00:05:03,520 Ich werde damit anfangen und hier einen Blick darauf werfen, und das 56 00:05:03,740 --> 00:05:04,940 sieht nicht allzu schäbig aus, 57 00:05:04,970 --> 00:05:06,130 das ist nicht schlecht. 58 00:05:07,450 --> 00:05:13,990 Jetzt können Sie hier definitiv auch einige Bonusarbeiten ausprobieren, einige Bonusaufgaben und zum Beispiel diese Details einfärben - 59 00:05:13,990 --> 00:05:20,200 einfach, erschwinglich und die Dauer hängt davon ab, ob sie eher kurz ist oder von den 60 00:05:20,200 --> 00:05:25,810 unterschiedlichen Werten, die Sie für einfach haben, für die Komplexität und die Erschwinglichkeit . 61 00:05:25,810 --> 00:05:31,150 Ich werde das hier nicht tun, aber Sie können sich natürlich die Essensdaten ansehen, um zu sehen, welche Werte wir 62 00:05:31,150 --> 00:05:37,090 dort haben, um abzuleiten, was kurz ist, was eine mittlere Dauer ist, was eine lange Dauer ist und um zu sehen, welche Werte 63 00:05:37,090 --> 00:05:41,800 für Komplexität und Komplexität verwendet werden usw. und dann können Sie tatsächlich einige hinzufügen, wenn Sie prüfen, ob 64 00:05:41,800 --> 00:05:47,470 die verschiedenen Werte, die wir hier im Detailbild der Mahlzeit für diese Details ausgeben, unterschiedlich gestaltet werden sollen, damit Sie den 65 00:05:47,470 --> 00:05:52,360 Text je nach Länge unterschiedlich färben oder nicht. Ich werde das hier nicht tun, weil 66 00:05:52,360 --> 00:05:58,150 es nur eine zusätzliche Arbeit ist, die der Navigation, die im Mittelpunkt dieses Moduls steht, nicht 67 00:05:58,150 --> 00:05:59,740 wirklich viel hinzufügt. 68 00:05:59,740 --> 00:06:08,110 Stattdessen werde ich mich auf Zutaten und Schritte konzentrieren. Dort besteht ein erster Schritt darin, sicherzustellen, dass der Titel hier 69 00:06:08,530 --> 00:06:10,250 richtig gestaltet ist. 70 00:06:10,330 --> 00:06:17,660 Fügen wir also dem Stylesheet einen Titel hinzu, und dort füge ich eine Schriftfamilie hinzu und setze diese so, dass 71 00:06:19,080 --> 00:06:26,790 sie ohne Fettdruck geöffnet wird, setze die Schriftgröße auf 22 und setze den Text auf Mitte aus, um den Text in der 72 00:06:26,810 --> 00:06:32,160 Mitte zu zentrieren, und damit, wenn wir überprüfen dies, das sieht ganz gut aus. 73 00:06:32,230 --> 00:06:37,540 Jetzt möchte ich natürlich auch meine Zutaten in meinen Schritten ausgeben. Dafür ist es wichtig zu verstehen, 74 00:06:37,540 --> 00:06:40,770 dass es sich bei den Dummy-Daten um Arrays handelt. Dies 75 00:06:40,780 --> 00:06:42,480 sind meine Zutaten, zum Beispiel 76 00:06:42,490 --> 00:06:49,540 meine Schritte, und Sie sehen, dass nur Text darin enthalten ist Arrays. Ich möchte meinen Text hier nur als Liste 77 00:06:49,720 --> 00:06:56,410 ausgeben und ich werde keine FlatList verwenden, da Sie dies tun könnten. Sie könnten sozusagen scrollbare Container darin 78 00:06:56,410 --> 00:07:01,470 haben, aber ich werde einfach die Zutaten und die Schritte darüber rendern andere. 79 00:07:01,480 --> 00:07:07,690 Hier können wir also einen guten alten Ansatz verwenden, den wir von Vanilla React oder React for Web 80 00:07:07,690 --> 00:07:14,140 kennen, den ich auch früher im Kurs gezeigt habe. Wir können unsere ausgewählte Mahlzeit verwenden und dort die Zutaten, die 81 00:07:14,140 --> 00:07:17,640 eine Reihe von Zeichenfolgen sind, und diese in eine Reihe von Komponenten 82 00:07:17,650 --> 00:07:23,230 abbilden. Auf diese Weise können Sie eine Liste von Daten in React und auch React Native ausgeben. Oft verwenden Sie 83 00:07:23,230 --> 00:07:27,660 FlatList, aber hier verwenden wir Dies ist nicht erforderlich, da es sich nicht um eine unendliche 84 00:07:27,670 --> 00:07:33,300 Menge handelt. Daher benötigen wir diese Optimierungen nicht und haben eine umlaufende Bildlaufansicht um den gesamten Bildschirm, sodass wir auch 85 00:07:33,400 --> 00:07:38,050 einen Bildlauf durchführen können, wenn wir mehr ausgeben, als auf den Bildschirm passt. Wir sind also 86 00:07:38,050 --> 00:07:39,950 absolut in Ordnung mit diesem Ansatz und 87 00:07:39,950 --> 00:07:45,220 daher werde ich hier meine einzige Zutat in dieser Map-Funktion haben und Map ist eine Methode, die in JavaScript 88 00:07:45,220 --> 00:07:46,900 integriert ist, wie Sie wissen. 89 00:07:46,990 --> 00:07:50,030 Hier müssen wir jetzt ein jsx-Element zurückgeben und was ich 90 00:07:50,170 --> 00:07:55,660 zurückgeben möchte, ist Eine Textkomponente, bei der ich einfach eine Zutat ausgebe, weil die Zutaten eine Reihe von Zeichenfolgen 91 00:07:55,720 --> 00:07:56,880 sind. Die Zutat 92 00:07:56,890 --> 00:07:59,010 ist also nur eine Zeichenfolge. Hier müssen 93 00:07:59,020 --> 00:08:03,280 wir auch einen Schlüssel angeben. Dies ist eine Anforderung von React, und wir können die 94 00:08:03,280 --> 00:08:07,980 Zutat als Schlüssel verwenden, weil wir dies tun werden Haben Sie jede Zutat immer nur einmal. 95 00:08:07,990 --> 00:08:10,230 Das ist garantiert einzigartig, so 96 00:08:10,240 --> 00:08:12,510 werden unsere Mahlzeiten zubereitet. Wenn wir dies 97 00:08:12,550 --> 00:08:19,520 speichern und uns hier ein Rezept ansehen, sehen wir unsere Zutaten. Jetzt für das Styling können wir dort sicherlich etwas 98 00:08:19,520 --> 00:08:21,620 tun, und ich werde es 99 00:08:21,650 --> 00:08:26,960 in einer Sekunde tun, aber bevor ich das tue, lassen Sie mich dies für 100 00:08:26,960 --> 00:08:34,250 die Schritte hier wiederholen und diesen Text durch selectedMeal ersetzen. Schritte und geben Sie dann jeden Schritt hier aus, der ebenfalls nur 101 00:08:34,350 --> 00:08:41,910 eine Zeichenfolge ist und der auch in einem Text eindeutig ist. Wenn dies hinzugefügt wird, sollten wir auch die Schritte für unser Essen sehen, in der Tat. 102 00:08:42,630 --> 00:08:46,730 Jetzt kann das Styling wieder ein wenig verbessert werden und wir werden genau das 103 00:08:47,010 --> 00:08:53,460 tun. Ich denke, es ist sinnvoll, eine separate Komponente oder Renderfunktion dafür zu erstellen, und ich werde eine separate Komponente erstellen, wir werden 104 00:08:53,460 --> 00:08:58,830 sie in derselben Datei speichern Obwohl wir es wirklich nur in dieser Datei verwenden, können Sie aber auch eine 105 00:08:58,830 --> 00:08:59,310 neue 106 00:08:59,340 --> 00:09:03,260 Datei erstellen, ganz nach Ihren Wünschen. Dort habe ich mein 107 00:09:03,270 --> 00:09:11,340 Listenelement, das Requisiten erhält, wo ich zurückkomme, und jetzt möchte ich hier eine Ansicht verwenden, die ich 108 00:09:11,350 --> 00:09:17,500 als Wrapper importiere, damit ich diesen Container formatieren und dort meinen Text haben 109 00:09:17,500 --> 00:09:24,690 kann, in dem ich Requisitenkinder ausgeben kann und jetzt wird diese Ansicht hier einen Stil 110 00:09:24,700 --> 00:09:28,450 von Stilen erhalten. ListItem vielleicht, damit wir das 111 00:09:28,450 --> 00:09:33,490 schön gestalten können, und hier möchte ich natürlich keinen Text verwenden, sondern Standardtext, 112 00:09:33,490 --> 00:09:34,630 auch hier 113 00:09:34,780 --> 00:09:38,010 natürlich, damit wir unseren eigenen benutzerdefinierten Text nutzen können. 114 00:09:38,170 --> 00:09:47,430 Lassen Sie uns nun für den Listenelementstil hier zum Stylesheet gehen und ein Listenelement hinzufügen. Jedes Listenelement sollte einen Rand 115 00:09:47,460 --> 00:09:55,530 haben, einen vertikalen Rand von beispielsweise 10 und einen horizontalen Rand von beispielsweise 20, also mehr Abstand 116 00:09:55,530 --> 00:10:05,600 nach links und rechts und lassen Sie uns hier vielleicht auch eine hellgraue Randfarbe mit #ccc und einer Randbreite von 1 hinzufügen. 117 00:10:05,600 --> 00:10:09,540 Wir werden sehen, wie das aussieht, und dann 118 00:10:09,540 --> 00:10:16,730 auch ein bisschen Polsterung hinzufügen, 10 in alle Richtungen und wir Ich werde sehen, wie 119 00:10:17,570 --> 00:10:18,930 das aussieht. 120 00:10:18,950 --> 00:10:25,910 Jetzt müssen wir nur noch sicherstellen, dass wir unsere Listenelementkomponente verwenden, und wir geben sie zurück, indem wir bei der Ausgabe der 121 00:10:25,910 --> 00:10:30,590 Zutaten anstelle von Text hier immer noch Zutaten zwischen den öffnenden und schließenden Tags unserer 122 00:10:30,590 --> 00:10:36,200 eigenen benutzerdefinierten Komponente übergeben, weil wir dort sind Verwenden von Requisitenkindern, die den Inhalt verwenden, den wir zwischen 123 00:10:36,470 --> 00:10:38,920 dem Öffnen und Schließen von Tags übergeben, und 124 00:10:39,110 --> 00:10:43,870 wir tun dasselbe für unsere Schritte. Schauen wir 125 00:10:44,530 --> 00:10:47,520 uns das an, 126 00:10:47,670 --> 00:10:55,870 ja, sieht nicht schlecht aus. Wir bekommen unsere Schritte hier, haben unsere Zutaten, natürlich können Sie dieses 127 00:10:55,870 --> 00:11:02,650 Styling verfeinern, genau auf Ihre Anforderungen abstimmen, so wie Sie es wollen, aber ich bin eigentlich ziemlich zufrieden damit und damit 128 00:11:02,650 --> 00:11:08,050 haben wir ein grundlegendes Detail Bildschirm und natürlich funktioniert dieser Detailbildschirm auch für unsere Favoriten, da 129 00:11:08,050 --> 00:11:10,610 wir dort ein und denselben Bildschirm verwenden. 130 00:11:10,660 --> 00:11:15,500 Das sieht also ganz gut aus, der Filterbildschirm fehlt jetzt.