Aby dotrzeć do innych ekranów, potrzebujemy czegoś, co możemy kliknąć, a następnie dotknąć.
Później będziemy mieli tutaj naszą siatkę kategorii i będziemy pracować nad tym również
w tym module, ale aby rozpocząć nawigację, dodam przycisk, więc
na ekranie kategorii, w którym mam ten tekst, chcę dodać przycisk, który mogę dotknąć, aby przejść
do ekranu kategorii posiłków.
Więc tutaj dodam ten przycisk React Native, ten, który jest wbudowany i ustawia tytuł przejść do posiłków, a kiedy
naciśniemy ten przycisk, chcę uruchomić funkcję, która faktycznie prowadzi mnie do ekranu
kategorii posiłków.
Teraz ustawiliśmy tutaj ekran tej
kategorii posiłków, ale jak możemy teraz do niego przejść? Cóż, w tym celu ważne jest, aby wiedzieć, że
każdy komponent załadowany za pomocą nawigacji React automatycznie otrzymuje specjalny rekwizyt, więc każdy komponent mapowany na jeden z
identyfikatorów ekranu tutaj, więc w
tym przypadku te trzy komponenty otrzymają specjalny rekwizyt Zagnieżdżone tam komponenty nie otrzymują automatycznie,
tylko komponenty najwyższego poziomu, które zostały zamapowane na identyfikatory w nawigatorach.
Więc to jest specjalny rekwizyt, o którym mówię,
spójrzmy na to.
Więc tutaj w rekwizytach, możemy go wyodrębnić i po prostu zacznijmy od rekwizytów rejestrujących w konsoli tutaj,
abyśmy mogli uzyskać pomysł i na razie, abyśmy nie otrzymali błędu,
po prostu przekażę tutaj pustą funkcję onPress .
Zapiszmy to i zobaczmy, co jest w rekwizytach.
Po przeładowaniu mamy przycisk, który nic nie robi, a tutaj w konsoli widzimy, że rekwizyty nie
są puste.
To jest
nasz obiekt rekwizytów, a tam mamy rekwizyt nawigacyjny, który sam jest obiektem, który
ma pewne akcje, dobrze, ale także ma na przykład funkcję pop, push, replace, reset i nawigację, więc jest tam kilka funkcji, funkcje
które pomagają nam poruszać się po naszej aplikacji.
Ma również rekwizyty ekranowe, więc nasz rekwizyt ma rekwizyty ekranowe, które na razie możemy zignorować.
Więc to, co jest w środku rekwizytów i ten rekwizyt nawigacyjny, ta część nawigacyjna, która
tam jest,
naprawdę nam pomaga, więc ten rekwizyt nawigacyjny. Pomaga nam tutaj, ponieważ kiedy naciśniemy ten przycisk i zrobię
to za pomocą wbudowanej funkcji strzałki tutaj, oczywiście możesz mieć oddzielną funkcję, którą tworzysz i
którą następnie mapujesz na
onPress, to pomaga nam i można z niej korzystać nawigować.
Tak więc w przypadku nawigacji rekwizytów nawigacja jest tym specjalnym rekwizytem, który otrzymujemy dzięki nawigacji React,
ponieważ załadowaliśmy ten element ekranu kategorii za pomocą naszego
nawigatora tutaj, ten specjalny rekwizyt nawigacyjny ma metodę nawigacji
i jest to twoja
główna metoda, najważniejsza metoda poruszania się za pomocą nawigacji React. Jak działa nawigacja?
Nawigacja bierze obiekt jako argument iw tym obiekcie możesz ustawić nazwę trasy, do której chcesz
nawigować.
Więc przekazujesz właściwość nazwy trasy w tym obiekcie, którą przekazujesz do nawigacji, a teraz ważne, nazwa
trasy, którą tu podajesz, musi być jedną z trzech nazw tras, które tu ustawiłem.
Teraz nazwy tras są identyfikatorami, które wyświetlasz przed tymi dwukropkami, więc nazwy właściwości w
tym obiekcie przekazałeś, aby utworzyć nawigator stosów.
To są nazwy twoich tras
i możesz ich teraz używać do nawigacji. Więc tutaj chcę przejść do kategorii posiłków,
to jest nazwa
trasy, której chcę użyć, więc tutaj wskazuję kategorie
posiłków, ale nie tak, to w JavaScript szukałoby zmiennej kategorii posiłków, zamiast łańcucha o nazwie kategorie posiłków,
ponieważ po prostu powie w końcu Javascript i React nawigację, że chcesz udać się
na trasę, która ma nazwę kategorii posiłków i to jest ta trasa tutaj.
Więc teraz możesz się tam dostać.
Jeśli teraz to zapiszemy i klikniemy tutaj przejdź do posiłków, zobaczysz, że przechodzimy do ekranu posiłku, otrzymujemy tę fajną
animację z pudełka, otrzymujemy ten przycisk powrotu, który wygląda dokładnie tak, jak byśmy
oczekiwali iOS i wszystko to działa od razu po wyjęciu z pudełka, bez dodatkowej pracy, bez zaznaczenia,
bez ręcznego kodu animacji, wyciągamy to z pudełka dzięki bibliotece nawigacyjnej React.
Dzięki temu możemy przejść do naszego ekranu posiłków, do ekranu kategorii posiłków, a następnie z powrotem do ekranu
kategorii i działa to również na Androidzie. Dostajemy specyficzną dla Androida nawigację routingu, która wygląda
nieco inaczej niż na iOS, jest to animacja nawigacji, której można się spodziewać na
Androidzie, oczywiście można również użyć przycisku Wstecz urządzenia, aby wrócić.
W ten sposób możesz przejść do innego ekranu i pamiętaj, że nawigacja oczywiście nie mówi nic
o kierunku, w którym chcemy iść, nie mówi React nawigacji, czy powinna odtwarzać tę animację
do przodu, czy animację do tyłu . Nawigacja React automatycznie to wykrywa, ponieważ pod
maską zarządza tym stosem stron, o których mówiłem, tym stosem ekranów i tym stosem,
właśnie teraz, gdy uruchamiamy aplikację, mamy tylko ekran kategorii, ale po naciśnięciu
tego przycisku , nawigacja w końcu mówi React nawigacja, że skoro robimy to wewnątrz
komponentu, który został załadowany nawigatorem stosów, chcemy przejść do innego ekranu,
który powinien zostać przesunięty na stos. Jest to po prostu zachowanie domyślne i dlatego wie, że
chce iść naprzód, ponieważ nowa trasa została wypchnięta, co oznacza, że została dodana do stosu, chcemy iść naprzód, a
kiedy klikamy przycisk Wstecz, który dodaje automatycznie, oznacza to, że zrzuca ten ekran ze stosu, a ponieważ usuwa coś ze
stosu, wie, że powinien odtworzyć animację. Tak właśnie dzieje się
za kulisami, tak naprawdę nie musisz się tym martwić, i
to jest dobra rzecz, chcę tylko, abyś był tego świadomy, że nawigacja
React wykonuje tam ciężkie działania i zarządza tym stosem ekran i odpowiednie animacje, których potrzebujesz, dlatego pod maską.
Okej, więc to pozwala nam iść tam iz powrotem, tam iz powrotem.
Teraz Twoim wyzwaniem na następny wykład, w którym to zrobimy razem, jest to, że zrobisz
to samo na ekranie kategorii posiłków i upewnisz się, że możemy
także przejść do MealDetailScreen. Nie powinno to być zbyt trudne, w następnym wykładzie zrobimy to razem.