Beginnen wir also mit der Arbeit an dieser App.
Dafür habe ich hier eine brandneue App.
Sie finden sie im Anhang, falls Sie auf derselben Start-App aufbauen möchten.
Diese einfache App gibt uns hier eine sehr hässliche App, in der wir Text haben, der von der
Statusleiste und der Kerbe überlappt wird.
Jetzt können wir dies mit der Ansicht zum Speichern des Bereichs beheben, wie Sie zuvor erfahren haben.
Dies ist jedoch nicht erforderlich, da wir diesen Inhalt sowieso nicht beibehalten und eine Bibliothek eines Drittanbieters verwenden, mit der wir
problemlos zwischen verschiedenen Bildschirmen navigieren und abrufen können nette Animationen auf
dem Weg, damit wir uns
nicht darum kümmern müssen und diese Bibliothek von Drittanbietern auch die Kerbe auf dem Gerät verwaltet und uns diesen Speicherbereich sofort
zur Verfügung stellt.
Bevor wir diese Bibliothek von Drittanbietern hinzufügen, beginnen wir jedoch mit dem Schreiben von Code, da wir
nur zwischen Bildschirmen navigieren können, wenn wir mehrere Bildschirme haben.
Dafür werde ich hier einen neuen Bildschirmordner erstellen und ich werde auch bereits
einen Komponentenordner erstellen. Der Unterschied besteht darin, dass wir im Bildschirmordner diese
React-Komponenten haben, die wir dann als Vollbild verwenden, denke ich Im Komponentenordner werden stattdessen die Komponenten angezeigt,
die
wir auf unseren Bildschirmen verwenden. Wenn wir also beispielsweise dieses Raster aus Essenskategorien und Lebensmittelkategorien
haben, ist unser Rasterelement eine Komponente, das gesamte Raster, die gesamten Lebensmittelkategorien Bildschirm wäre jedoch
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
bereits alle Dateien erstellen und sie natürlich während des gesamten Moduls mit Leben füllen. Wir brauchen den Kategorienbildschirm und ich
werde den Dateikategorienbildschirm benennen, um wirklich klar zu machen, was sich darin
befindet.
Dies ist der Bildschirm, auf dem wir eine Kategorie wie Italienisch, Deutsch, Amerikanisch auswählen können. Wenn wir also eine
Lebensmittelkategorie auswählen können, fügen wir Inhalte hinzu, die dies widerspiegeln. In diesem Bildschirm fügen wir ein solches Raster auf
diesem Bildschirm hinzu Komponente später.
Sobald wir eine Kategorie ausgewählt haben, sehen wir eine Liste der Mahlzeiten, die in diese Kategorie passen, und ich benenne diesen Bildschirm,
den wir dann sehen, zu dem wir navigieren, den Bildschirm "Kategorie Mahlzeiten", da dies der Bildschirm ist, der
geladen wird die Mahlzeiten für eine ausgewählte Kategorie.
Das ist also ein weiterer Bildschirm, den wir brauchen, und ein weiterer Bildschirm, zu dem wir navigieren können.
Jetzt benötigen wir auch einen Favoritenbildschirm, auf dem alle unsere Lieblingsrezepte und Lieblingsgerichte angezeigt werden. Außerdem benötigen
wir einen MealDetailScreen. Dies ist der Bildschirm, den wir sehen, wenn wir auf eine einzelne Mahlzeit innerhalb einer
ausgewählten Kategorie oder auf tippen der Lieblingsbildschirm. Dies zeigt uns dann die Zutaten und
die detaillierten Schritte für diese Mahlzeit.
Und zu guter Letzt benötigen wir einen Filterbildschirm. Dieser Filterbildschirm ermöglicht es uns, Filter wie veganes Essen
so einzustellen, dass nur Rezepte angezeigt werden, die vegan oder vegetarisch oder glutenfrei oder laktosefrei sind. Dies sind die
vier Kategorien, die ich in
dieser App haben werde, also sind dies die Bildschirme. Jetzt fügen wir Komponenten nach Bedarf hinzu
und fügen nicht alle Dateien im Voraus
hinzu. Damit haben wir das grundlegende Setup, das wir hier benötigen, obwohl natürlich alle
unsere Bildschirme völlig leer sind. Jetzt werden wir sie Schritt für Schritt mit mehr Leben füllen,
aber ich möchte zumindest eine grundlegende Komponente in jedem dieser Bildschirme einrichten.
Also beginne ich im Kategorienbildschirm und natürlich müssen wir dort React from React importieren, da
wir eine React-Komponente erstellen, und wir werden auch etwas aus React Native importieren, da wir hier offensichtlich eine React-Komponente
erstellen werden das verwendet einige React Native-Komponenten. Um genau zu sein, beginne ich hier einfach
und importiere eine Ansicht und einen Text aus React Native und erstelle dann meine Komponente, in
diesem Fall den Kategorienbildschirm, der Requisiten enthält oder der Requisiten erhalten könnte, zumindest weil es sich schließlich um eine normale
React-Komponente handelt wo ich dies als meine Standardkomponente exportieren werde. Ich werde auch ein Stylesheet hinzufügen, da wir es
wahrscheinlich brauchen und wenn wir es nicht tun, können wir es später noch löschen.
Also werde ich meine
Stile hier mit Stylesheet erstellen, so erstellen.
Das ist also eine sehr einfache React-Komponente, die jedoch
nichts rendert. Innerhalb der Komponentenfunktion hier müssen wir also etwas zurückgeben, und das ist ein
JSX-Code, in dem ich eine Ansicht und dort einen Text rendern möchte und hier sage ich den Kategorienbildschirm.
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
Flex auf eins setze und dann den Inhalt zum Zentrieren rechtfertige und Elemente zum Zentrieren ausrichte. Wie Sie gelernt
haben, wird dies eine Sache tun,
den Inhalt auf dem Bildschirm zentrieren. Daher wird dieser Text am Ende auf dem Bildschirm zentriert.
Dies ist die Basiskomponente, und ich werde diesen Inhalt in alle anderen Bildschirme kopieren. Natürlich
ist dies nicht der endgültige Inhalt, den wir dort haben, sondern nur ein paar Dummy-Inhalte,
damit wir zwischen einigen dieser Bildschirme navigieren und etwas sehen können .
Hier haben wir also den Kategorie-Mahlzeitbildschirm, das ist diese Komponente hier und deshalb müssen
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
den Favoritenbildschirm um und exportiere daher den
Favoritenbildschirm hier und dann
hier,
ich kann den Favoritenbildschirm sagen, das in
den Filterbildschirm kopieren und dort das Gleiche tun, es
ist Den Filterbildschirm habe ich
umbenannt und exportiert und auch den Filterbildschirm hier in unserem Text gesagt
und nicht zuletzt ist dies der MealDetailScreen.
Hier haben wir also den
MealDetailScreen, ich werde ihn hier auch MealDetailScreen nennen und den MealDetailScreen exportieren.
Damit haben wir alles in diesen Bildschirmen eingerichtet. Jetzt sind wir fast mit
der Vorbereitung fertig. Ich möchte dieser App nur
einige spezielle Schriftarten hinzufügen und danach werden wir uns direkt mit dem Hinzufügen von Navigation befassen.