Jetzt wissen Sie natürlich, wie wir zur Detailseite gehen können. Dies
haben wir zuvor getan, als wir von der Kategorieseite zur Kategoriespeiseseite gewechselt sind. Wir können hier also den gleichen Ansatz
verwenden und können
das Video an dieser Stelle natürlich anhalten und dies selbst
tun. Das können Sie hier als Übung unbedingt tun. Lass es uns natürlich auch zusammen machen.
Wenn wir also im Bildschirm "Kategorie Mahlzeiten" eine Mahlzeit auswählen, onSelectMeal, sollte diese Funktion hier ausgelöst werden,
da wir diese Funktion über onSelectMeal an das Mahlzeitelement übergeben und dort beim Drücken an die
berührbare Deckkraft binden hier, damit
auf ausgewählte Mahlzeit und damit in der Kategorie Mahlzeiten Bildschirm ausgelöst werden soll, können
wir in dieser Funktion hier navigieren. Nachdem ich diese Funktion zum Rendern von Mahlzeiten definiert
habe, bei der ich mein Mahlzeitelement innerhalb meiner Komponente rendere, habe ich Zugriff auf Requisiten. Da der Bildschirm für die
Kategorie Mahlzeit unsere Komponente ist, die wir mithilfe der Navigation laden, kann ich auf die Navigationseigenschaft und zugreifen Die Navigationsmethode und
Sie haben gelernt, dass wir dort jetzt den Routennamen übergeben können, zu dem wir gehen möchten, und das wäre
eine Mahlzeit, also der Routenname, den wir im Mahlzeiten-Navigator eingerichtet haben, dieser Name hier, dies lädt die Mahlzeit Detail Seite.
Jetzt müssen wir dort einige Daten weiterleiten, und die Daten, die ich hier weiterleiten möchte, sind natürlich die
ID der ausgewählten Mahlzeit, damit wir dann die Details dieser Mahlzeit auf diese Mahlzeitendetailseite laden können, um
sie dort zu rendern.
Im Bildschirm "Kategorie Mahlzeiten" können wir hier Parameter für unser Navigationsobjekt einrichten, für das Objekt, das wir zum Navigieren übergeben, und Parameter nehmen
ein Objekt mit Schlüssel-Wert-Paaren, wie Sie gelernt haben. Das haben wir zuvor und
hier getan, möchte ich mein Essen weiterleiten. ID, die ich natürlich aus einem Artikel
Daten bekommen kann, weil itemData. Artikel ist eine Mahlzeit und jede Mahlzeit, wie Sie im Modell sehen können, hat einen Ausweis, wir speichern diesen hier.
Daher können wir hier natürlich itemData sagen. Artikel. id, das ist es, was ich weiterleiten möchte
und damit sollten wir zur Seite mit den Essensdetails gehen und dort können wir auch die ID der Mahlzeit extrahieren, die wir
geladen haben.
Lassen Sie uns auf dem MealDetailScreen sehen, ob das funktioniert, die Mahlzeit. ID ist Requisiten. Navigation. getParam und
jetzt war der Name Mahlzeit. id, das ist der Parametername, den ich hier zum Speichern
des Parameters gewählt habe. Wenn Sie hier einen anderen Namen gewählt haben, müssen
Sie hier einen anderen Namen wählen oder dort natürlich denselben Namen verwenden, und jetzt können wir die Mahlzeit auswählen, für die wir
importieren Alle Mahlzeiten aus der Dummy-Datendatei im Datenordner, wie diese und jetzt die ausgewählte Mahlzeit hier ist natürlich Mahlzeiten finden und dann führen wir diese Funktion für jede Mahlzeit dort aus und es ist die Mahlzeit,
in der die Mahlzeit stattfindet. ID passt zum Essen. Wenn wir dort oben
extrahiert haben, ist das unsere ausgewählte Mahlzeit. Um zu beweisen, dass dies funktioniert, können wir es dort ausgeben, selectedMeal. Titel und natürlich möchte ich
auch den Titel in der Kopfzeile setzen und das haben Sie auch gelernt.
Sie können dies tun, indem Sie diesem Bildschirm hier Navigationsoptionen und Navigationsoptionen hinzufügen. Sie haben
gelernt, dass Sie dies mithilfe dieser speziellen Funktion hier tun, wenn Sie etwas Dynamisches abrufen möchten.
Navigationsdaten erhalten Sie dort. Diese Funktion wird von React Navigation für Sie aufgerufen, wie Sie gelernt
haben. Jetzt müssen wir dort unser Navigationsobjekt und unser Navigationsoptionsobjekt zurückgeben. Bevor wir dies zurückgeben, können wir Daten verwenden, die
wir erhalten Navigationsdaten, wie unsere Navigations-Requisite, die es uns wiederum ermöglicht, auf einen Parameter zuzugreifen,
sodass wir navigationData verwenden können. Navigation. getParam, um unser Essen zu bekommen. ID auch hier und rufen Sie unsere Mahlzeit
ab, so wie wir es dort oben in der Komponente tun, machen
Sie dasselbe dort unten für die Navigationsoptionen und mit der ausgewählten Mahlzeit können wir hier
natürlich einen Header-Titel auf selectedMeal setzen. Titel und das haben wir zuvor getan. So
können wir hier in unseren Navigationsoptionen Daten extrahieren und diese dynamischen Daten dort verwenden, um
beispielsweise den Headertitel festzulegen.
Lassen Sie uns
sehen, ob es funktioniert, vielleicht unter Android. Lass uns ans Licht und schön gehen, da haben wir alle unsere Rezepte, lass uns hier
zum Salat gehen und hier ist es, hier ist unser Titel, wir sehen es auch hier, also ist
alles geladen, wenn wir zum Lachs gehen, sehen wir stattdessen Das.
Das funktioniert also alles so, wie es sollte,
sehr schön zu sehen,
jetzt ist es Zeit, den nächsten Schritt zu tun, denn zum Beispiel möchten wir eine Mahlzeit als Favorit markieren
können, und dafür möchte ich hier ein Sternsymbol haben in der Navigation, die ich drücken kann.
Das fehlt uns noch und wir haben noch nichts darüber gelernt, also
ist es ein schöner nächster Schritt.