1 00:00:02,430 --> 00:00:05,640 Beginnen wir also mit der Arbeit an dieser App. 2 00:00:05,760 --> 00:00:08,270 Dafür habe ich hier eine brandneue App. 3 00:00:08,280 --> 00:00:12,390 Sie finden sie im Anhang, falls Sie auf derselben Start-App aufbauen möchten. 4 00:00:12,420 --> 00:00:19,020 Diese einfache App gibt uns hier eine sehr hässliche App, in der wir Text haben, der von der 5 00:00:19,020 --> 00:00:21,440 Statusleiste und der Kerbe überlappt wird. 6 00:00:21,450 --> 00:00:26,800 Jetzt können wir dies mit der Ansicht zum Speichern des Bereichs beheben, wie Sie zuvor erfahren haben. 7 00:00:26,820 --> 00:00:33,210 Dies ist jedoch nicht erforderlich, da wir diesen Inhalt sowieso nicht beibehalten und eine Bibliothek eines Drittanbieters verwenden, mit der wir 8 00:00:33,210 --> 00:00:36,530 problemlos zwischen verschiedenen Bildschirmen navigieren und abrufen können nette Animationen auf 9 00:00:36,690 --> 00:00:38,310 dem Weg, damit wir uns 10 00:00:38,310 --> 00:00:44,610 nicht darum kümmern müssen und diese Bibliothek von Drittanbietern auch die Kerbe auf dem Gerät verwaltet und uns diesen Speicherbereich sofort 11 00:00:44,610 --> 00:00:45,880 zur Verfügung stellt. 12 00:00:45,900 --> 00:00:52,230 Bevor wir diese Bibliothek von Drittanbietern hinzufügen, beginnen wir jedoch mit dem Schreiben von Code, da wir 13 00:00:52,230 --> 00:00:56,020 nur zwischen Bildschirmen navigieren können, wenn wir mehrere Bildschirme haben. 14 00:00:56,040 --> 00:01:01,950 Dafür werde ich hier einen neuen Bildschirmordner erstellen und ich werde auch bereits 15 00:01:01,950 --> 00:01:07,830 einen Komponentenordner erstellen. Der Unterschied besteht darin, dass wir im Bildschirmordner diese 16 00:01:07,860 --> 00:01:15,420 React-Komponenten haben, die wir dann als Vollbild verwenden, denke ich Im Komponentenordner werden stattdessen die Komponenten angezeigt, 17 00:01:15,420 --> 00:01:16,430 die 18 00:01:16,440 --> 00:01:23,280 wir auf unseren Bildschirmen verwenden. Wenn wir also beispielsweise dieses Raster aus Essenskategorien und Lebensmittelkategorien 19 00:01:23,280 --> 00:01:30,200 haben, ist unser Rasterelement eine Komponente, das gesamte Raster, die gesamten Lebensmittelkategorien Bildschirm wäre jedoch 20 00:01:30,450 --> 00:01:37,530 ein Bildschirm und ich denke, das macht Sinn. Jetzt, wie skizziert, wie in dieser App beschrieben, benötigen wir ein paar Bildschirme und ich werde 21 00:01:37,530 --> 00:01:43,860 bereits alle Dateien erstellen und sie natürlich während des gesamten Moduls mit Leben füllen. Wir brauchen den Kategorienbildschirm und ich 22 00:01:43,890 --> 00:01:49,440 werde den Dateikategorienbildschirm benennen, um wirklich klar zu machen, was sich darin 23 00:01:49,440 --> 00:01:50,200 befindet. 24 00:01:50,250 --> 00:01:57,270 Dies ist der Bildschirm, auf dem wir eine Kategorie wie Italienisch, Deutsch, Amerikanisch auswählen können. Wenn wir also eine 25 00:01:57,270 --> 00:02:04,170 Lebensmittelkategorie auswählen können, fügen wir Inhalte hinzu, die dies widerspiegeln. In diesem Bildschirm fügen wir ein solches Raster auf 26 00:02:04,230 --> 00:02:06,420 diesem Bildschirm hinzu Komponente später. 27 00:02:06,420 --> 00:02:14,100 Sobald wir eine Kategorie ausgewählt haben, sehen wir eine Liste der Mahlzeiten, die in diese Kategorie passen, und ich benenne diesen Bildschirm, 28 00:02:14,100 --> 00:02:20,190 den wir dann sehen, zu dem wir navigieren, den Bildschirm "Kategorie Mahlzeiten", da dies der Bildschirm ist, der 29 00:02:20,190 --> 00:02:23,390 geladen wird die Mahlzeiten für eine ausgewählte Kategorie. 30 00:02:23,460 --> 00:02:28,240 Das ist also ein weiterer Bildschirm, den wir brauchen, und ein weiterer Bildschirm, zu dem wir navigieren können. 31 00:02:28,320 --> 00:02:35,100 Jetzt benötigen wir auch einen Favoritenbildschirm, auf dem alle unsere Lieblingsrezepte und Lieblingsgerichte angezeigt werden. Außerdem benötigen 32 00:02:35,100 --> 00:02:42,300 wir einen MealDetailScreen. Dies ist der Bildschirm, den wir sehen, wenn wir auf eine einzelne Mahlzeit innerhalb einer 33 00:02:42,300 --> 00:02:48,390 ausgewählten Kategorie oder auf tippen der Lieblingsbildschirm. Dies zeigt uns dann die Zutaten und 34 00:02:48,390 --> 00:02:51,120 die detaillierten Schritte für diese Mahlzeit. 35 00:02:51,120 --> 00:02:58,020 Und zu guter Letzt benötigen wir einen Filterbildschirm. Dieser Filterbildschirm ermöglicht es uns, Filter wie veganes Essen 36 00:02:58,020 --> 00:03:05,700 so einzustellen, dass nur Rezepte angezeigt werden, die vegan oder vegetarisch oder glutenfrei oder laktosefrei sind. Dies sind die 37 00:03:05,790 --> 00:03:08,110 vier Kategorien, die ich in 38 00:03:08,130 --> 00:03:14,950 dieser App haben werde, also sind dies die Bildschirme. Jetzt fügen wir Komponenten nach Bedarf hinzu 39 00:03:15,040 --> 00:03:18,410 und fügen nicht alle Dateien im Voraus 40 00:03:18,430 --> 00:03:25,390 hinzu. Damit haben wir das grundlegende Setup, das wir hier benötigen, obwohl natürlich alle 41 00:03:25,720 --> 00:03:31,330 unsere Bildschirme völlig leer sind. Jetzt werden wir sie Schritt für Schritt mit mehr Leben füllen, 42 00:03:31,330 --> 00:03:34,160 aber ich möchte zumindest eine grundlegende Komponente in jedem dieser Bildschirme einrichten. 43 00:03:34,390 --> 00:03:40,000 Also beginne ich im Kategorienbildschirm und natürlich müssen wir dort React from React importieren, da 44 00:03:40,000 --> 00:03:46,750 wir eine React-Komponente erstellen, und wir werden auch etwas aus React Native importieren, da wir hier offensichtlich eine React-Komponente 45 00:03:47,050 --> 00:03:52,600 erstellen werden das verwendet einige React Native-Komponenten. Um genau zu sein, beginne ich hier einfach 46 00:03:52,630 --> 00:03:58,110 und importiere eine Ansicht und einen Text aus React Native und erstelle dann meine Komponente, in 47 00:03:58,120 --> 00:04:04,630 diesem Fall den Kategorienbildschirm, der Requisiten enthält oder der Requisiten erhalten könnte, zumindest weil es sich schließlich um eine normale 48 00:04:04,630 --> 00:04:11,530 React-Komponente handelt wo ich dies als meine Standardkomponente exportieren werde. Ich werde auch ein Stylesheet hinzufügen, da wir es 49 00:04:11,530 --> 00:04:16,870 wahrscheinlich brauchen und wenn wir es nicht tun, können wir es später noch löschen. 50 00:04:16,870 --> 00:04:19,150 Also werde ich meine 51 00:04:19,150 --> 00:04:22,060 Stile hier mit Stylesheet erstellen, so erstellen. 52 00:04:22,330 --> 00:04:26,440 Das ist also eine sehr einfache React-Komponente, die jedoch 53 00:04:26,440 --> 00:04:32,730 nichts rendert. Innerhalb der Komponentenfunktion hier müssen wir also etwas zurückgeben, und das ist ein 54 00:04:32,770 --> 00:04:39,920 JSX-Code, in dem ich eine Ansicht und dort einen Text rendern möchte und hier sage ich den Kategorienbildschirm. 55 00:04:40,240 --> 00:04:49,270 Jetzt werde ich dieser Ansicht auch einen Stil geben, in dem ich Stile sage. Bildschirm, mit einem sehr einfachen Bildschirmlayout oder einem Bildschirmstil, bei dem ich 56 00:04:49,270 --> 00:04:56,260 Flex auf eins setze und dann den Inhalt zum Zentrieren rechtfertige und Elemente zum Zentrieren ausrichte. Wie Sie gelernt 57 00:04:56,260 --> 00:04:58,980 haben, wird dies eine Sache tun, 58 00:04:59,080 --> 00:05:04,850 den Inhalt auf dem Bildschirm zentrieren. Daher wird dieser Text am Ende auf dem Bildschirm zentriert. 59 00:05:04,960 --> 00:05:09,880 Dies ist die Basiskomponente, und ich werde diesen Inhalt in alle anderen Bildschirme kopieren. Natürlich 60 00:05:09,910 --> 00:05:14,920 ist dies nicht der endgültige Inhalt, den wir dort haben, sondern nur ein paar Dummy-Inhalte, 61 00:05:14,920 --> 00:05:19,210 damit wir zwischen einigen dieser Bildschirme navigieren und etwas sehen können . 62 00:05:19,210 --> 00:05:25,900 Hier haben wir also den Kategorie-Mahlzeitbildschirm, das ist diese Komponente hier und deshalb müssen 63 00:05:25,900 --> 00:05:37,880 wir hier und hier exportieren. Ich werde daher den Kategorie-Mahlzeitbildschirm so sagen. Jetzt füge ich dies auch dem Favoritenbildschirm hinzu und benenne es in 64 00:05:37,880 --> 00:05:41,650 den Favoritenbildschirm um und exportiere daher den 65 00:05:41,690 --> 00:05:43,700 Favoritenbildschirm hier und dann 66 00:05:43,700 --> 00:05:45,000 hier, 67 00:05:45,110 --> 00:05:48,720 ich kann den Favoritenbildschirm sagen, das in 68 00:05:48,740 --> 00:05:53,060 den Filterbildschirm kopieren und dort das Gleiche tun, es 69 00:05:53,080 --> 00:05:55,920 ist Den Filterbildschirm habe ich 70 00:05:55,940 --> 00:06:02,240 umbenannt und exportiert und auch den Filterbildschirm hier in unserem Text gesagt 71 00:06:02,390 --> 00:06:06,110 und nicht zuletzt ist dies der MealDetailScreen. 72 00:06:06,110 --> 00:06:09,000 Hier haben wir also den 73 00:06:09,740 --> 00:06:15,140 MealDetailScreen, ich werde ihn hier auch MealDetailScreen nennen und den MealDetailScreen exportieren. 74 00:06:15,140 --> 00:06:19,930 Damit haben wir alles in diesen Bildschirmen eingerichtet. Jetzt sind wir fast mit 75 00:06:20,060 --> 00:06:23,390 der Vorbereitung fertig. Ich möchte dieser App nur 76 00:06:23,450 --> 00:06:29,240 einige spezielle Schriftarten hinzufügen und danach werden wir uns direkt mit dem Hinzufügen von Navigation befassen.