1 00:00:02,710 --> 00:00:05,590 Teraz już wiesz, jak możemy przejść do strony ze szczegółami, jest to 2 00:00:05,620 --> 00:00:11,530 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 3 00:00:11,530 --> 00:00:12,880 i oczywiście 4 00:00:12,910 --> 00:00:16,900 możesz wstrzymać wideo w tym momencie i zrobić to samodzielnie, 5 00:00:16,900 --> 00:00:24,540 to absolutnie coś, co możesz zrobić tutaj jako praktykę. Oczywiście, zróbmy to również razem. 6 00:00:24,630 --> 00:00:32,550 Tak więc na ekranie kategorii posiłków, gdy wybieramy posiłek, onSelectMeal, ta funkcja powinna się tutaj uruchomić, 7 00:00:32,550 --> 00:00:39,950 ponieważ przekazujemy tę funkcję przez onSelectMeal do elementu posiłku i tam, wiążemy go na 8 00:00:39,950 --> 00:00:42,550 prasie, na dotykowej nieprzezroczystości 9 00:00:42,570 --> 00:00:48,870 tutaj, aby powinien wystrzelić na wybrany posiłek, a zatem na ekranie kategorii 10 00:00:48,870 --> 00:00:54,870 posiłków, w tej funkcji możemy nawigować. Teraz, kiedy zdefiniowałem tę funkcję renderowania posiłku, w 11 00:00:54,900 --> 00:01:00,780 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 12 00:01:00,780 --> 00:01:07,050 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ę, 13 00:01:07,050 --> 00:01:12,820 że tam możemy teraz podać nazwę trasy, do której chcemy się udać, i będzie to szczegół posiłku, 14 00:01:12,900 --> 00:01:18,810 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. 15 00:01:19,590 --> 00:01:26,400 Teraz będziemy musieli przesłać tam niektóre dane, a dane, które chcę tutaj przesłać, to oczywiście identyfikator 16 00:01:26,400 --> 00:01:32,850 wybranego posiłku, abyśmy mogli następnie załadować szczegóły tego posiłku na stronie szczegółów tego posiłku, aby 17 00:01:32,850 --> 00:01:34,500 je tam renderować. 18 00:01:34,770 --> 00:01:44,520 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 19 00:01:44,520 --> 00:01:49,980 parametry biorą obiekt par klucz-wartość, jak się dowiedziałeś, to zrobiliśmy wcześniej i 20 00:01:49,980 --> 00:01:56,730 tutaj, chcę do przekazania mojego posiłku. id, który oczywiście mogę uzyskać z 21 00:01:56,790 --> 00:02:03,330 danych pozycji, ponieważ itemData. przedmiot jest posiłkiem i każdy posiłek, jak widać w modelu, ma identyfikator, przechowujemy go tutaj. 22 00:02:04,320 --> 00:02:10,890 Stąd tutaj oczywiście możemy powiedzieć itemData. pozycja. id, właśnie to chcę przekazać i 23 00:02:10,890 --> 00:02:16,650 dzięki temu powinniśmy przejść do strony szczegółów posiłku i tam też będziemy mogli wyodrębnić identyfikator załadowanego 24 00:02:16,650 --> 00:02:17,410 posiłku. 25 00:02:17,640 --> 00:02:26,760 Więc na MealDetailScreen, zobaczmy, czy to działa, posiłek. id to rekwizyty. nawigacja. getParam, a 26 00:02:26,760 --> 00:02:34,470 teraz nazwa była posiłkiem. id, to jest nazwa parametru, którą wybrałem tutaj 27 00:02:34,470 --> 00:02:39,090 do przechowywania parametru, jeśli wybrałeś tutaj inną nazwę, musisz wybrać inną 28 00:02:39,090 --> 00:02:46,980 nazwę tutaj lub użyć oczywiście tej samej nazwy, a teraz możemy wybrać posiłek, aby to zaimportować wszystkie posiłki 29 00:02:46,980 --> 00:02:59,800 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 30 00:02:59,800 --> 00:03:05,770 posiłek tam, gdzie posiłek. id pasuje do posiłku. id tam 31 00:03:05,860 --> 00:03:14,200 wydobywaliśmy, to nasz wybrany posiłek. Aby udowodnić, że to działa, możemy go tam wypisać, selectedMeal. tytuł i oczywiście 32 00:03:14,290 --> 00:03:21,250 chcę również ustawić tytuł w nagłówku i tego też się nauczyłeś. 33 00:03:21,970 --> 00:03:28,460 Możesz to zrobić, dodając tutaj opcje nawigacji, opcje nawigacji i nauczyłeś się, 34 00:03:28,490 --> 00:03:35,090 że jeśli chcesz odzyskać coś dynamicznego, robisz to za pomocą tej specjalnej funkcji tutaj. 35 00:03:35,690 --> 00:03:42,650 Dostajesz tam dane nawigacyjne, ta funkcja jest wywoływana przez React nawigację, jak się dowiedziałeś, a teraz 36 00:03:43,340 --> 00:03:52,050 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, 37 00:03:52,050 --> 00:03:58,470 takie jak nasz rekwizyt nawigacyjny, który z kolei pozwala nam uzyskać dostęp do parametrów, dzięki 38 00:03:58,470 --> 00:04:09,340 czemu możemy korzystać z navigationData. nawigacja. getParam, aby dostać nasz posiłek. id tutaj, a także odzyskać nasz 39 00:04:09,340 --> 00:04:13,890 posiłek, tak jak robimy to tam w komponencie, zrób to 40 00:04:13,990 --> 00:04:19,630 samo w dół dla opcji nawigacji, a po wybraniu posiłku możemy oczywiście 41 00:04:19,630 --> 00:04:25,040 ustawić tytuł nagłówka na selectedMeal. tytuł i tak zrobiliśmy wcześniej, w ten sposób 42 00:04:25,060 --> 00:04:30,650 możemy wyodrębnić dane tutaj w naszych opcjach nawigacji i użyć tam tych danych dynamicznych, na przykład, 43 00:04:30,790 --> 00:04:32,620 aby ustawić tytuł nagłówka. 44 00:04:35,400 --> 00:04:37,830 W ten sposób 45 00:04:37,920 --> 00:04:47,600 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 46 00:04:49,530 --> 00:04:54,690 i tutaj jest, oto nasz tytuł, widzimy to tutaj, więc to wszystko jest załadowane, 47 00:04:54,690 --> 00:04:58,050 jeśli pójdziemy do łososia, zamiast tego zobaczymy że. 48 00:04:58,050 --> 00:05:00,850 To wszystko działa tak, jak powinno, bardzo 49 00:05:00,870 --> 00:05:02,350 miło to widzieć, 50 00:05:02,370 --> 00:05:08,340 teraz nadszedł czas, aby zrobić kolejny krok, ponieważ na przykład chcemy móc oznaczyć posiłek jako 51 00:05:08,340 --> 00:05:13,650 ulubiony, a do tego chcę mieć tutaj ikonę gwiazdki w nawigacji, którą mogę nacisnąć. 52 00:05:13,650 --> 00:05:16,290 Tego nam jeszcze brakuje i jeszcze się nie dowiedzieliśmy, więc 53 00:05:16,320 --> 00:05:17,850 jest to miły kolejny krok.