Teraz już wiesz, jak możemy przejść do strony ze szczegółami, jest to
coś, co zrobiliśmy wcześniej, kiedy przeszliśmy ze strony kategorii na stronę kategorii posiłków. Możemy więc zastosować to samo podejście tutaj
i oczywiście
możesz wstrzymać wideo w tym momencie i zrobić to samodzielnie,
to absolutnie coś, co możesz zrobić tutaj jako praktykę. Oczywiście, zróbmy to również razem.
Tak więc na ekranie kategorii posiłków, gdy wybieramy posiłek, onSelectMeal, ta funkcja powinna się tutaj uruchomić,
ponieważ przekazujemy tę funkcję przez onSelectMeal do elementu posiłku i tam, wiążemy go na
prasie, na dotykowej nieprzezroczystości
tutaj, aby powinien wystrzelić na wybrany posiłek, a zatem na ekranie kategorii
posiłków, w tej funkcji możemy nawigować. Teraz, kiedy zdefiniowałem tę funkcję renderowania posiłku, w
której renderuję element posiłku wewnątrz mojego komponentu, mam dostęp do rekwizytów i tam, ponieważ ekran kategorii posiłków jest
naszym komponentem, który ładujemy za pomocą nawigacji, mogę uzyskać dostęp do właściwości nawigacji i metoda nawigacji i nauczyliście się,
że tam możemy teraz podać nazwę trasy, do której chcemy się udać, i będzie to szczegół posiłku,
więc nazwa trasy, którą ustaliliśmy w nawigatorze posiłków, ta nazwa tutaj, spowoduje to załadowanie strona ze szczegółami posiłków.
Teraz będziemy musieli przesłać tam niektóre dane, a dane, które chcę tutaj przesłać, to oczywiście identyfikator
wybranego posiłku, abyśmy mogli następnie załadować szczegóły tego posiłku na stronie szczegółów tego posiłku, aby
je tam renderować.
Więc na ekranie kategorii posiłków tutaj możemy ustawić parametry tutaj na naszym obiekcie nawigacyjnym, na obiekcie, który mijamy, aby nawigować, a
parametry biorą obiekt par klucz-wartość, jak się dowiedziałeś, to zrobiliśmy wcześniej i
tutaj, chcę do przekazania mojego posiłku. id, który oczywiście mogę uzyskać z
danych pozycji, ponieważ itemData. przedmiot jest posiłkiem i każdy posiłek, jak widać w modelu, ma identyfikator, przechowujemy go tutaj.
Stąd tutaj oczywiście możemy powiedzieć itemData. pozycja. id, właśnie to chcę przekazać i
dzięki temu powinniśmy przejść do strony szczegółów posiłku i tam też będziemy mogli wyodrębnić identyfikator załadowanego
posiłku.
Więc na MealDetailScreen, zobaczmy, czy to działa, posiłek. id to rekwizyty. nawigacja. getParam, a
teraz nazwa była posiłkiem. id, to jest nazwa parametru, którą wybrałem tutaj
do przechowywania parametru, jeśli wybrałeś tutaj inną nazwę, musisz wybrać inną
nazwę tutaj lub użyć oczywiście tej samej nazwy, a teraz możemy wybrać posiłek, aby to zaimportować wszystkie posiłki
z pliku danych obojętnych w folderze danych, tak jak teraz, a teraz wybrany posiłek to oczywiście wyszukiwanie posiłków, a następnie uruchamiamy tę funkcję na każdym posiłku tam i to
posiłek tam, gdzie posiłek. id pasuje do posiłku. id tam
wydobywaliśmy, to nasz wybrany posiłek. Aby udowodnić, że to działa, możemy go tam wypisać, selectedMeal. tytuł i oczywiście
chcę również ustawić tytuł w nagłówku i tego też się nauczyłeś.
Możesz to zrobić, dodając tutaj opcje nawigacji, opcje nawigacji i nauczyłeś się,
że jeśli chcesz odzyskać coś dynamicznego, robisz to za pomocą tej specjalnej funkcji tutaj.
Dostajesz tam dane nawigacyjne, ta funkcja jest wywoływana przez React nawigację, jak się dowiedziałeś, a teraz
tam musimy zwrócić nasz obiekt nawigacyjny, nasz obiekt opcji nawigacyjnych, ale zanim to zwrócimy, możemy użyć danych, które otrzymujemy dane nawigacyjne,
takie jak nasz rekwizyt nawigacyjny, który z kolei pozwala nam uzyskać dostęp do parametrów, dzięki
czemu możemy korzystać z navigationData. nawigacja. getParam, aby dostać nasz posiłek. id tutaj, a także odzyskać nasz
posiłek, tak jak robimy to tam w komponencie, zrób to
samo w dół dla opcji nawigacji, a po wybraniu posiłku możemy oczywiście
ustawić tytuł nagłówka na selectedMeal. tytuł i tak zrobiliśmy wcześniej, w ten sposób
możemy wyodrębnić dane tutaj w naszych opcjach nawigacji i użyć tam tych danych dynamicznych, na przykład,
aby ustawić tytuł nagłówka.
W ten sposób
zobaczmy, czy to działa, może na Androidzie. Przejdźmy do światła i uroczo, mamy wszystkie nasze przepisy, chodźmy do sałatki tutaj
i tutaj jest, oto nasz tytuł, widzimy to tutaj, więc to wszystko jest załadowane,
jeśli pójdziemy do łososia, zamiast tego zobaczymy że.
To wszystko działa tak, jak powinno, bardzo
miło to widzieć,
teraz nadszedł czas, aby zrobić kolejny krok, ponieważ na przykład chcemy móc oznaczyć posiłek jako
ulubiony, a do tego chcę mieć tutaj ikonę gwiazdki w nawigacji, którą mogę nacisnąć.
Tego nam jeszcze brakuje i jeszcze się nie dowiedzieliśmy, więc
jest to miły kolejny krok.