1 00:00:02,710 --> 00:00:05,590 Jetzt wissen Sie natürlich, wie wir zur Detailseite gehen können. Dies 2 00:00:05,620 --> 00:00:11,530 haben wir zuvor getan, als wir von der Kategorieseite zur Kategoriespeiseseite gewechselt sind. Wir können hier also den gleichen Ansatz 3 00:00:11,530 --> 00:00:12,880 verwenden und können 4 00:00:12,910 --> 00:00:16,900 das Video an dieser Stelle natürlich anhalten und dies selbst 5 00:00:16,900 --> 00:00:24,540 tun. Das können Sie hier als Übung unbedingt tun. Lass es uns natürlich auch zusammen machen. 6 00:00:24,630 --> 00:00:32,550 Wenn wir also im Bildschirm "Kategorie Mahlzeiten" eine Mahlzeit auswählen, onSelectMeal, sollte diese Funktion hier ausgelöst werden, 7 00:00:32,550 --> 00:00:39,950 da wir diese Funktion über onSelectMeal an das Mahlzeitelement übergeben und dort beim Drücken an die 8 00:00:39,950 --> 00:00:42,550 berührbare Deckkraft binden hier, damit 9 00:00:42,570 --> 00:00:48,870 auf ausgewählte Mahlzeit und damit in der Kategorie Mahlzeiten Bildschirm ausgelöst werden soll, können 10 00:00:48,870 --> 00:00:54,870 wir in dieser Funktion hier navigieren. Nachdem ich diese Funktion zum Rendern von Mahlzeiten definiert 11 00:00:54,900 --> 00:01:00,780 habe, bei der ich mein Mahlzeitelement innerhalb meiner Komponente rendere, habe ich Zugriff auf Requisiten. Da der Bildschirm für die 12 00:01:00,780 --> 00:01:07,050 Kategorie Mahlzeit unsere Komponente ist, die wir mithilfe der Navigation laden, kann ich auf die Navigationseigenschaft und zugreifen Die Navigationsmethode und 13 00:01:07,050 --> 00:01:12,820 Sie haben gelernt, dass wir dort jetzt den Routennamen übergeben können, zu dem wir gehen möchten, und das wäre 14 00:01:12,900 --> 00:01:18,810 eine Mahlzeit, also der Routenname, den wir im Mahlzeiten-Navigator eingerichtet haben, dieser Name hier, dies lädt die Mahlzeit Detail Seite. 15 00:01:19,590 --> 00:01:26,400 Jetzt müssen wir dort einige Daten weiterleiten, und die Daten, die ich hier weiterleiten möchte, sind natürlich die 16 00:01:26,400 --> 00:01:32,850 ID der ausgewählten Mahlzeit, damit wir dann die Details dieser Mahlzeit auf diese Mahlzeitendetailseite laden können, um 17 00:01:32,850 --> 00:01:34,500 sie dort zu rendern. 18 00:01:34,770 --> 00:01:44,520 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 19 00:01:44,520 --> 00:01:49,980 ein Objekt mit Schlüssel-Wert-Paaren, wie Sie gelernt haben. Das haben wir zuvor und 20 00:01:49,980 --> 00:01:56,730 hier getan, möchte ich mein Essen weiterleiten. ID, die ich natürlich aus einem Artikel 21 00:01:56,790 --> 00:02:03,330 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. 22 00:02:04,320 --> 00:02:10,890 Daher können wir hier natürlich itemData sagen. Artikel. id, das ist es, was ich weiterleiten möchte 23 00:02:10,890 --> 00:02:16,650 und damit sollten wir zur Seite mit den Essensdetails gehen und dort können wir auch die ID der Mahlzeit extrahieren, die wir 24 00:02:16,650 --> 00:02:17,410 geladen haben. 25 00:02:17,640 --> 00:02:26,760 Lassen Sie uns auf dem MealDetailScreen sehen, ob das funktioniert, die Mahlzeit. ID ist Requisiten. Navigation. getParam und 26 00:02:26,760 --> 00:02:34,470 jetzt war der Name Mahlzeit. id, das ist der Parametername, den ich hier zum Speichern 27 00:02:34,470 --> 00:02:39,090 des Parameters gewählt habe. Wenn Sie hier einen anderen Namen gewählt haben, müssen 28 00:02:39,090 --> 00:02:46,980 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 29 00:02:46,980 --> 00:02:59,800 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, 30 00:02:59,800 --> 00:03:05,770 in der die Mahlzeit stattfindet. ID passt zum Essen. Wenn wir dort oben 31 00:03:05,860 --> 00:03:14,200 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 32 00:03:14,290 --> 00:03:21,250 auch den Titel in der Kopfzeile setzen und das haben Sie auch gelernt. 33 00:03:21,970 --> 00:03:28,460 Sie können dies tun, indem Sie diesem Bildschirm hier Navigationsoptionen und Navigationsoptionen hinzufügen. Sie haben 34 00:03:28,490 --> 00:03:35,090 gelernt, dass Sie dies mithilfe dieser speziellen Funktion hier tun, wenn Sie etwas Dynamisches abrufen möchten. 35 00:03:35,690 --> 00:03:42,650 Navigationsdaten erhalten Sie dort. Diese Funktion wird von React Navigation für Sie aufgerufen, wie Sie gelernt 36 00:03:43,340 --> 00:03:52,050 haben. Jetzt müssen wir dort unser Navigationsobjekt und unser Navigationsoptionsobjekt zurückgeben. Bevor wir dies zurückgeben, können wir Daten verwenden, die 37 00:03:52,050 --> 00:03:58,470 wir erhalten Navigationsdaten, wie unsere Navigations-Requisite, die es uns wiederum ermöglicht, auf einen Parameter zuzugreifen, 38 00:03:58,470 --> 00:04:09,340 sodass wir navigationData verwenden können. Navigation. getParam, um unser Essen zu bekommen. ID auch hier und rufen Sie unsere Mahlzeit 39 00:04:09,340 --> 00:04:13,890 ab, so wie wir es dort oben in der Komponente tun, machen 40 00:04:13,990 --> 00:04:19,630 Sie dasselbe dort unten für die Navigationsoptionen und mit der ausgewählten Mahlzeit können wir hier 41 00:04:19,630 --> 00:04:25,040 natürlich einen Header-Titel auf selectedMeal setzen. Titel und das haben wir zuvor getan. So 42 00:04:25,060 --> 00:04:30,650 können wir hier in unseren Navigationsoptionen Daten extrahieren und diese dynamischen Daten dort verwenden, um 43 00:04:30,790 --> 00:04:32,620 beispielsweise den Headertitel festzulegen. 44 00:04:35,400 --> 00:04:37,830 Lassen Sie uns 45 00:04:37,920 --> 00:04:47,600 sehen, ob es funktioniert, vielleicht unter Android. Lass uns ans Licht und schön gehen, da haben wir alle unsere Rezepte, lass uns hier 46 00:04:49,530 --> 00:04:54,690 zum Salat gehen und hier ist es, hier ist unser Titel, wir sehen es auch hier, also ist 47 00:04:54,690 --> 00:04:58,050 alles geladen, wenn wir zum Lachs gehen, sehen wir stattdessen Das. 48 00:04:58,050 --> 00:05:00,850 Das funktioniert also alles so, wie es sollte, 49 00:05:00,870 --> 00:05:02,350 sehr schön zu sehen, 50 00:05:02,370 --> 00:05:08,340 jetzt ist es Zeit, den nächsten Schritt zu tun, denn zum Beispiel möchten wir eine Mahlzeit als Favorit markieren 51 00:05:08,340 --> 00:05:13,650 können, und dafür möchte ich hier ein Sternsymbol haben in der Navigation, die ich drücken kann. 52 00:05:13,650 --> 00:05:16,290 Das fehlt uns noch und wir haben noch nichts darüber gelernt, also 53 00:05:16,320 --> 00:05:17,850 ist es ein schöner nächster Schritt.