Jetzt, da die Registerkarten hinzugefügt wurden, fehlt der Inhalt im Favoritenbildschirm.
Jetzt haben wir noch keine Funktionen zum Hinzufügen von Favoriten. Wenn wir auf dieses Sternsymbol klicken, funktioniert das nicht.
Übrigens
ist mir bewusst, dass auch hier Inhalte fehlen. Wir
werden diese hinzufügen später.
Wenn Sie also auf das Sternsymbol klicken, geschieht noch nichts, und wir können
das erst etwas später
ausführen. Dennoch möchte ich diesen Lieblingsbildschirm ein wenig mehr mit einigen Dummy-Mahlzeiten füllen, die wir dort laden Nehmen
wir an, zumindest mit
der Funktionalität, dort auch zum MealDetailScreen zu gelangen, denn am Ende besteht die Idee hier darin,
dass wir hier eine Liste von Mahlzeiten haben, so wie wir
sie hier haben, nachdem wir eine Kategorie ausgewählt haben und auf die wir tippen können eine Mahlzeit,
um zur Detailseite
zu gelangen, so wie wir es im Essensnavigator tun können, also sollte ich im Essensstapel-Navigator sagen,
und daher ist das, was wir für Favoriten benötigen, für unsere Registerkarte "Favoriten" kein einziger Bildschirm Aber ein weiterer Stapel, ein Stapel für unsere
Favoritenfunktion
in dieser Anwendung, das ist es, was wir hier brauchen.
Dies gibt uns dann übrigens auch einen Header, den wir derzeit ebenfalls vermissen.
Das ist natürlich nicht
allzu schwer zu implementieren. Wir können einfach einen anderen Stack-Navigator über unserer tabScreenConfig erstellen, wodurch der
Stack-Navigator für unseren Favoriten-Stack eingerichtet wird.
Das Objekt, das wir hier übergeben, muss also alle Bildschirme definieren, die wir in diesem
Stapel haben möchten, und das wäre der Favoritenbildschirm selbst mit der Liste
unserer Lieblingsgerichte. Dort möchte ich auf den Favoritenbildschirm zeigen und dann einen haben Mahlzeit Detail und
ich werde auf MealDetailScreen zeigen und wir verwenden bereits den MealDetailScreen hier in unserem Mahlzeiten-Navigator, in unserem
anderen Stapel-Navigator, aber das
ist völlig
in Ordnung, Sie können ein und denselben Bildschirm in verschiedenen Stapel-Navigatoren
verwenden, es ist nichts falsch daran Das.
Daher können wir MealDetailScreen auch hier im Favoritenstapelnavigator verwenden. Jetzt möchte ich nur sicherstellen, dass
ich auch meine Optionen hier kopiere, meine Standardnavigationsoptionen, dieses zweite Argument für
das Erstellen des Stapelnavigators, für den Essensnavigator in meine Favoriten Stack Navigator
auch.
Als zweites Argument zum Erstellen eines Stapelnavigators kopiere ich hier in das
Objekt, in dem ich meine Standardnavigationsoptionen eingerichtet habe, sodass ich für diesen Stapel dieselben Standardeinstellungen,
denselben Headerstil und natürlich auch diesen habe Schneiden Sie dies von hier aus und entfernen
Sie dies von hier und speichern Sie diese Standardeinstellung in einer Konstanten hier, möglicherweise unseren defaultStackNavOptions. Dies ist dieses Objekt, das den
Header-Stil festlegt. Anschließend können wir die defaultStackNavOptions hier in unserem Mahlzeiten-Navigator-Stack und auch hier
in unserem verwenden Favoriten-Stack-Navigator und ich werde dies auch in der FavNavigator-Konstante speichern. Natürlich können Sie
diese Konstante beliebig benennen.
Jetzt ist es dieser FavNavigator,
so dass am Ende eine Stack-Navigator-Komponente erstellt wurde, die ich in meiner tabScreenConfig verwenden möchte. Dort haben wir
für Mahlzeiten bereits den Stack-Navigator verwendet. Für Favoriten habe ich den Favoritenbildschirm verwendet, und dies
muss sich jetzt
ändern sollte der FavNavigator sein, damit wir hier auch einen Stack anstelle eines einzelnen Bildschirms verwenden.
Und damit haben wir bereits, wenn wir zu den Favoriten gehen, unseren Titel hier, zumindest haben wir einen
Header, der bereits beweist, dass wir hier einen Stack-Navigator verwenden.
Natürlich ist ein Bildschirm nicht wirklich nützlich, was ich hier nicht sagen möchte. Daher
möchte ich bestimmte Navigationsoptionen für den Lieblingsbildschirm festlegen. Diese können wir entweder hier verwenden, wenn wir den
Favoritenstapelnavigator mit dem längeren Formular erstellen Wo wir hier den Bildschirm und die Navigationsoptionen für diesen Bildschirm
eingerichtet haben oder dies direkt in unserer Komponente tun, habe ich das
bisher getan, das
werde ich auch hier tun.
Dort können wir den FavoritesScreen einrichten. NavigationOptionen wie diese verwenden das Objekt hier,
wir brauchen die Funktion
nicht, da ich den Namen hier nicht dynamisch ableiten werde und in den Navigationsoptionen hier einfach
den Header-Titel auf Ihre Favoriten setzen werde und Sie natürlich auswählen können Jeder Text, den Sie hier haben möchten, und
wenn
wir ihn jetzt speichern, sehen wir hier unseren benutzerdefinierten Titel, der etwas besser ist.
Wie gesagt, wir haben noch nicht wirklich die Werkzeuge, um Mahlzeiten als Favoriten zu speichern. Das werden
wir in einer Weile tun.
Im Moment möchte ich hier
nur einige Dummy-Mahlzeiten anzeigen, sagen wir die Mahlzeiten mit der ID M1 und M2, einfach zwei Dummy-Mahlzeiten,
und dafür können wir zum Lieblingsbildschirm gehen und anstatt diese Ansicht hier im anzuzeigen
Ende Ich möchte dasselbe wie im Bildschirm "Mahlzeiten
in der Kategorie" anzeigen. Richtig, ich möchte eine FlatList rendern, die dann meine Mahlzeiten hier rendert.
Der einzige Unterschied ist, welche Mahlzeiten
ich rendere. Diese Logik wird nicht dieselbe sein, da dies für meinen Lieblingsbildschirm anders ist.
Dies wird jedoch dasselbe sein, und da ich diese Logik zur Listenerstellung wiederverwenden werde und
das einzige, was sich unterscheidet, die Daten sind, die ich rendere, wäre es sinnvoll, diese Liste in eine separate
Komponente auszulagern, damit wir die Komponente in der wiederverwenden können Kategorie Mahlzeiten Bildschirm und im Favoritenbildschirm.
Also werde ich im Komponentenordner eine Mahlzeitliste hinzufügen. js-Datei und dort möchte ich eine
React-Komponente haben, also importiere React von React und wir müssen auch FlatList von React-Native importieren und wir müssen natürlich auch Stylesheet
von React-Native importieren und dann hier Wir können unsere
Essenslistenkomponente erstellen, in der wir Requisiten erhalten, und wir exportieren diese standardmäßig. Danach benötigen wir auch einige Stile,
damit
wir hier bereits Stylesheets erstellen können, und jetzt möchte ich meine Listenlogik aus der Kategorie
verschieben Mahlzeit Bildschirm in diese neue Komponente. Also schneide ich den gesamten jsx-Code, den
ich hier in der Kategorie Mahlzeitbildschirm zurückgebe, und verschiebe ihn hierher und gebe ihn in der
Mahlzeitlistenkomponente zurück.
Jetzt werde ich diese Ansicht hier
zurückgeben, und deshalb müssen wir die Ansicht natürlich auch hier importieren. Das bedeutet auch, dass wir den Look überarbeiten müssen, sodass
dieser Bildschirmstil auch aus Kategoriemahlzeiten herausgeschnitten werden kann. Daher benötigen wir hier kein Stylesheet mehr.
Wir können
den Stylesheet-Import auch loswerden, wir können
es tatsächlich Entfernen Sie alle React Native-Importe, da wir hier keine React Native-spezifische Komponente
mehr haben, und verschieben Sie diese stattdessen in die Essensliste. Dort im Stylesheet kann ich diesen Bildschirm hinzufügen, den ich gerade
entfernt habe, und ein passenderer Name ist daher wahrscheinlich Listen. Ich werde ihn also umbenennen. Technisch gesehen müssen
Sie ihn nicht umbenennen, aber es ist sinnvoll, da dies jetzt kein ist Bildschirmkomponente mehr,
es wird nur eine Liste gerendert, die dann der einzige Teil auf unserem Bildschirm ist,
aber das ist eine andere Geschichte. Also werde ich diese Liste einfach benennen und meine FlatList dort haben.
Jetzt werden natürlich Mahlzeiten angezeigt, die ich rendern möchte, die nicht mehr funktionieren. Stattdessen
erwarte ich einfach, dass einige Daten von meinen Requisiten hier abgerufen werden. Vielleicht benennen Sie sie mit Listendaten. Sie können hier natürlich einen
beliebigen Namen auswählen und rendern Essensartikel, der auch fehlt. Dafür können wir in der Kategorie
Mahlzeiten
dieses Render-Mahlzeitelement hier konstant schneiden, es aus dem
Kategorie Mahlzeiten-Bildschirm ausschneiden und es auch in unsere Essensliste verschieben.
Dort in der Mahlzeitlistenkomponente
füge ich diese Konstante hinzu, die diese Funktion zum Rendern von Essenselementen enthält, die alles enthält, was
zum Arbeiten benötigt wird, außer dass der Import
von Essenselementen fehlt. Daher müssen wir das Essenselement aus importieren. / MealItem, also aus der Mahlzeitartikelkomponente. Eine andere Sache wird auch hier in der Mahlzeitlistenkomponente fehlen,
und das wird die Navigationsstütze sein,
da die Navigationsstütze, wie bereits erwähnt, nur in Komponenten verfügbar ist, die
mit Hilfe eines Navigators von React Navigation geladen werden, und nur in dieser Komponente, nicht
in verschachtelten Komponenten.
Die Sache ist also, dass Kategorie Mahlzeiten die Komponente ist, die wir mit Hilfe des Navigators laden. Wenn
wir dann die darin enthaltene Essensliste verwenden, was wir in
einer Sekunde tun, hat die Essensliste nur keinen Zugriff auf die Requisitennavigation Die direkt geladene Komponente hat Zugriff, aber das ist
ein Problem, das leicht zu lösen ist.
Zunächst importieren wir jedoch die Essensliste hier aus der Essenslistenkomponente und geben die Essensliste hier in der Kategorie Essenskomponente zurück.
Jetzt benötigt die Essensliste natürlich die Listendaten-Requisite, mit der wir arbeiten. Lassen Sie uns also Listendaten übergeben und das
sollte einfach auf
das Array zeigen, das wir rendern möchten, das in diesem Fall Mahlzeiten angezeigt wird, und jetzt,
wie ich bereits
erwähnte, haben wir ein Problem mit der Navigationsstütze. Nun, wir können
es einfach weiterleiten, wir können die Navigation verwenden, hinzufügen Solch eine Requisite hier zur Essensliste und zur
Weiterleitung
der Requisitennavigation, so einfach können wir diese zur Essensliste weiterleiten.
Jetzt haben wir in der Essensliste in dieser Komponente wieder eine Navigationsstütze, weil wir
sie weiterleiten, unsere eigene Navigationsstütze hinzufügen und auf die Daten zeigen, die wir
auf der von React
bereitgestellten Navigationsstütze erhalten
Navigation, so haben wir hier wieder Zugriff darauf und damit sollten wir ein Setup haben, das
funktioniert, so dass dies unser Kategorie-Essensbildschirm sein sollte. Speichern wir es und ignorieren wir den Lieblingsbildschirm
für den Moment und sehen nur, dass unser Stack-Navigator hier immer noch funktioniert und es scheint, dass, wenn ich
das teste, das hier definitiv immer noch so funktioniert, wie es vorher war. Stellen wir nun sicher, dass wir dies auch
im Lieblingsbildschirm verwenden.
Hier auf dem Lieblingsbildschirm müssen wir also nichts aus React Native importieren, sondern
nur die gerade erstellte Mahlzeitlistenkomponente aus Komponenten und dann die Essensliste importieren und einfach die Essensliste
und jetzt den Unterschied zur Kategorie zurückgeben Der Essensbildschirm, auf dem wir auch die
Essensliste zurückgeben, enthält natürlich die Daten, die wir rendern möchten. Die Logik zum
Ableiten
dieser Daten. Dies ist der Unterschied.
Ein weiterer Unterschied zwischen
den Komponenten ist natürlich die Einrichtung unserer Navigationsoptionen und der von uns
festgelegte Headertitel.
Wir können das Stylesheet hier loswerden, das brauchen wir hier im Lieblingsbildschirm nicht
mehr und
jetzt die Daten, die ich rendern
möchte, die von meinen Mahlzeiten
abhängen, also importiere ich Mahlzeiten aus, jetzt aus den Dummy-Daten . js-Datei und wie ich bereits erwähnt habe, verwende ich hier nur
einige Dummy-Favoriten, die ich mir ausgedacht habe, da wir keine wirkliche Möglichkeit haben, Favoriten festzulegen.
Also hier, meine Lieblingsmahlzeiten, das könnte meine Speisekarte sein, und dort möchte ich nach zwei bestimmten Mahlzeiten filtern, also werde ich mir jede einzelne
Mahlzeit ansehen, aber ich
gebe nur dann wahr zurück, wenn die Mahlzeit. id ist gleich M1 oder wenn Mahlzeit. id ist gleich M2 und das ist
natürlich nur eine Dummy-Logik, damit wir hier etwas haben. Wir werden
diese später ersetzen, sobald wir wirklich wissen, wie wir unseren Status verwalten und wie wir
die aktuell festgelegten Favoriten verwalten.
Nun zur Essensliste, zu unserer Komponente hier, können wir
die Listendaten-Requisite, die wir dort benötigen, erneut weiterleiten, so dass wir Listendaten weiterleiten und diese einfach so auf Lieblingsmahlzeiten setzen können.
Jetzt sollten wir also auch einige
Favoriten haben, und wir
haben zwei Favoriten. Wenn ich jedoch darauf klicke, werden wir undefiniert. Dies ist kein Objekt, bei dem wir
versuchen, die Navigation der Requisiten-Navigation aufzurufen, und ja, das Problem ist natürlich, dass in Wie bereits erwähnt,
verwenden wir in der Essensliste die Navigationsstütze, die nur in der Komponente verfügbar ist,
die direkt über einen Navigator geladen wird. In diesem Fall ist dies der Lieblingsbildschirm. In der
Kategorie Mahlzeiten lösen wir dies, indem wir die Navigation weiterleiten Requisite, natürlich müssen wir hier genau
das Gleiche für unseren Lieblingsbildschirm tun, also müssen wir diese Navigations-Requisite hier auf der Essensliste bereitstellen und
die Requisiten-Navigation weiterleiten, damit diese Navigations-Requisite mit der Navigationsmethode in der Mahlzeitlisten-Komponente verfügbar ist auch.
Wenn wir nun zu den Favoriten gehen, können wir tatsächlich zum Detailbildschirm gehen.
Das funktioniert also, das ist ziemlich anständig, ziemlich nett. Wie Sie sehen, arbeiten diese beiden Stapelnavigatoren auch unabhängig voneinander. Wir können in
beiden Stapeln
separat auf dem Detailbildschirm angezeigt werden. Hier bin ich auf dem Detailbildschirm des Lachses in der Registerkarte "Mahlzeiten" und
kann zum Toast Hawaii gehen Detailbildschirm auf der Registerkarte Favoriten. Wir können hier in der Registerkarte "Mahlzeiten"
zurückgehen und ich bin immer noch auf der Toast-Hawaii-Detailseite hier im Favoritenstapel.
Diese beiden Stapel arbeiten also getrennt voneinander, völlig
unabhängig, und so sollte es auch sein.
Auf diese Weise können wir eine Logik wiederverwenden und verschiedene Stapel in ein und denselben
Registerkartennavigator zusammenführen, obwohl
noch eine Logik fehlt Dies ist ein großer Schritt nach vorne
und zeigt Ihnen hoffentlich die Leistungsfähigkeit der React-Navigation und wie Sie dieses gemeinsame Navigationsmuster einrichten, bei
dem Sie Registerkarten und dann verschiedene verschachtelte Stapel haben. Es fehlt ein Navigationsmuster, das ich Ihnen zeigen möchte,
und das ist
eine Seitenschublade.