Chcę zacząć od najbardziej podstawowej formy nawigacji, a także najpopularniejszej formy nawigacji, jaką masz w
dowolnej aplikacji mobilnej, i to jak poruszać się między ekranami i do tego skonfigurować
tak zwany stos i nawigator, ponieważ strony lub ekrany.
Użyję tych słów jako synonimów tutaj.
Tak więc strony i ekrany są w zasadzie zarządzane na stosie stron.
I za każdym razem, gdy przejdziesz do nowego ekranu, zostanie on przesunięty na ten stos na najwyższym ekranie
na stosie zawsze będzie widoczny ekran.
A kiedy klikniesz przycisk Wstecz, pojawi się ten ekran, na którym byłeś, zniknie.
A ponieważ zawsze widzisz w aplikacji najwyższy ekran, zobaczysz ekran poniżej tego, z
którego przyszedłeś.
Dlatego nazywa się Nawigator stosu.
To jest wściekłość.
Po prostu użyjmy go, a stanie się to bardzo jasne.
Zaimportowaliśmy z zareaguj.
Nawigacja i jej nazwa były nazwą funkcji.
Tak naprawdę musimy utworzyć taki nawigator stosów. Utwórz nawigator stosów.
Teraz jedna ważna uwaga: ta składnia jest poprawna, jeśli używasz wersji reagowania na nawigację za darmo, jeśli
używasz opcji reagowania na awersję do nawigacji, ponieważ zmieniła się nieznacznie, musisz zainstalować dodatkowy pakiet, jak
wspomniano wcześniej na wykładzie.
Musisz uruchomić npm zainstaluj kreskę kreskę zapisz reaguj nawigację kreska kreska stos i zainstaluj ten dodatkowy pakiet, a po jej zainstalowaniu
zaimportuj stwórz nawigator stosu od reaguj jako nawigacyjny stos kreska zamiast reagować nawigacja to niewielka zmiana,
której nie musisz wprowadzać cztery utwórz nawigator stosu, a kiedy tworzymy naszych nawigatorów,
na przykład krany lub narysuj nawigator później, będziesz mieć odpowiednie pakiety, które musisz zainstalować, aby
reagować na kran nawigacyjny i tak dalej, wszystko to jest omówione w wykładzie,
który znajdziesz przed tym wykładem.
Teraz tutaj nagrałem ten kurs z darmową wersją reagowania nawigacji, która poza tym jest dokładnie taka
sama.
Różni się tylko import, dlatego zaimportuję tutaj z reagującej nawigacji.
Ale jeśli podążasz za wersją 4, to reagujesz na bash nawigacyjny stos dodatkowych pakietów,
które musisz zainstalować.
Tak właśnie reaguje nawigacja w tej bibliotece, tworzysz tak zwane nawigatory, które w
końcu można powiedzieć, że obiekty faktycznie reagują na komponenty, ponieważ okaże się, że zawierają całą konfigurację nawigacji, która
zawiera wszystkie informacje o różnych ekranach i które wykona ciężkie
podnoszenie ładując różne ekrany i wykonując przyjemne płynne przejścia dla przejścia z
A do B.
Musimy więc zaimportować tworzenie nawigatora stosu, a następnie możemy po prostu wywołać, że teraz tworzenie nawigatora stosu wymaga
co najmniej jednego argumentu i jest to obiekt javascript, w którym konfigurujemy różne ekrany, między
którymi chcemy się poruszać, od tej aplikacji, którą chcę aby rozpocząć na ekranie kategorii i jeśli
kliknę tam kategorię, chcę przejść do ekranu kategorii posiłków, a jeśli następnie dotknę przepisu na
posiłku, chcę przejść do ekranu szczegółów posiłku, aby były nam potrzebne trzy ekrany w naszym nawigatorze stosów,
aby były to trzy ekrany, między którymi można się poruszać za pomocą tego wzorca stosu, popychając
strony i usuwając je, i dlaczego nie potrzebujemy ulubionych i filtrów, ponieważ filtry zostaną później dodane
za pomocą pasek boczny będzie to alternatywa dla tego stosu tutaj, a ulubione również jako alternatywa dla
tego stosu będziemy mogli przejść tam z kranami później, ale nie teraz.
Zacznijmy więc od tej podstawowej nawigacji opartej na stosie, w której możemy przechodzić między
ekranami kategorii, kategoriami, posiłkami. Ekran, a ty szczegółowo, informujemy, że reagujemy na nawigację na temat tych trzech ekranów, rejestrując
je jako pary kluczowych wartości, które przyjmujesz jako dowolny identyfikator o dowolnej nazwie. możesz wybrać na przykład kategorie, ale ta
nazwa należy do ciebie, ponieważ konwencja nazewnictwa nieruchomości rozpoczyna się tutaj od dużej litery,
ale nie musisz tego robić technicznie.
Więc używasz dowolnego identyfikatora jako nazwy właściwości w tym obiekcie, który przekazujesz,
aby utworzyć nawigator stosów, a teraz wartość w najprostszej postaci jest po prostu wskaźnikiem w składniku de reagującym,
który chcesz załadować jako ekran dla tego ekranu.
Tak więc w moim przypadku byłby to ekran kategorii. Wszystkie importuj ten ekran wszystkich kategorii importu z
ekranu kategorii ekranów. Mogę to zaimportować, ponieważ jest to mój domyślny eksport.
Teraz mapujemy te dwie kategorie, co pozwala nam później stwierdzić, że nawigacja czy biblioteka, z
której korzystamy, powinna załadować ekran kategorii.
Teraz, jak powiedziałem, nie jest to jedyny ekran, którego potrzebuję. Chcę również mieć kategorię posiłków.
Są to więc systemy drugiego ekranu. Ten ekran pokaże wszystkie posiłki dla wybranej kategorii,
dla których mamy wiele składników i to jest przygotowany przez nas ekran kategorii posiłków, który importujemy
z ekranów ekranu kategorii posiłków, więc w tym roku mapujemy według w sposób, w jaki wspomniałem, że jest to najprostsza forma
mapowania, po prostu posiadając nazwę właściwości, a następnie wskaźnik na komponencie, który
chcesz załadować, możesz również przekazać obiekt tutaj i ustawić właściwość screen na tym obiekcie, a następnie wskazać
na komponent, który chcesz załadować.
Dlaczego miałbyś to zrobić?
Ponieważ teraz możesz również skonfigurować tutaj dodatkową konfigurację oprócz ekranu, możesz ustawić niektóre domyślne opcje
ekranu itd., Ale nie jest to coś, o co musimy się
teraz martwić, zajmiemy się tym później w tym module chcę już tylko
wspomnieć, że jest to skrót, jest to dłuższa forma mówienia reakcji nawigacyjnej, które
ekrany powinny zostać załadowane, dla którego identyfikatora mówiącego, że potrzebujemy trzeciego identyfikatora, i to
jest identyfikator, który powinien załadować nasz szczegółowy ekran. nazwij to szczegół posiłku i chcę wskazać ekran mojego
szczegółowego posiłku, więc zaimportuję ekran szczegółów posiłku. A teraz przejdźmy do folderu ekranów i tam jest ekran szczegółowego posiłku
i ponownie użyję tutaj skrótu.
Przydałaby nam się ta dłuższa forma, ale użyję tego skrótu w punkcie na szczegółowym ekranie posiłku.
Tak więc przy tej podstawowej konfiguracji mówimy, że nawigacja reaguje.
Hej, to są ekrany, które będą mogły się teraz przemieszczać, jednak same dane niewiele zdziałają.
Dlaczego.
Ponieważ tworzymy ten nawigator stosów, ale nic z nim nie robimy, więc zmieńmy ten sposób, tworząc
nawigator stosów faktycznie zwraca kontener nawigacyjny i okazuje się, że jest to komponent reagujący.
To wszystko nazywa się jako nawigator posiłków.
Brzmi jak trafna nazwa, ponieważ to właśnie tutaj mamy.
A teraz przechowujemy komponent reagujący utworzony przez stos Nawigatora, który jest
zasadniczo komponentem reagującym, z całym ciężkim podnoszeniem ładowania różnych ekranów i odtwarzaniem animacji, ten komponent
reagujący jest przechowywany w nawigatorze posiłków.
Teraz możemy wyeksportować tutaj nawigator posiłków i spróbować użyć go w ten sposób i uchwycić nas, aby wyrenderować go na
ekranie i zobaczyć, co się stanie, ale tak naprawdę nawigacja działa nieco inaczej.
Musisz także utworzyć kontener aplikacji w tym kontenerze aplikacji, aby zawinąć swoją trasę.
Więc twój główny nawigator w tym przypadku mamy tylko jednego, musimy tylko ułożyć Nawigatora w stos.
Więc zawińmy to tym.
Owińmy nawigację po posiłkach lub utwórz ją ponownie, wywołując funkcję tworzenia kontenera aplikacji, a następnie
po prostu przekaż nawigator posiłków jako argument tworzenia kontenera aplikacji.
Tworzy również kontener nawigacyjny.
Więc daje ci również składnik reagujący.
Ale tak naprawdę nie jest to składnik reagujący.
Powinieneś użyć w swoim kodzie ASX, ponieważ zawiera on teraz wszystkie metadane dotyczące nawigacji w ogóle na temat reagowania na
nawigację i tak dalej.
Więc jest to po prostu wzorzec, który musisz zawinąć swoją trasą w najważniejszego nawigatora i użyć tego komponentu powrotu reagowania
w kodzie J to X, a następnie zasadniczo konfigurację, którą zawsze będziesz mieć podczas pracy z
reagującą nawigacją, później też się nauczysz. jak korzystać z wielu nawigatorów w jednej aplikacji.
Nawiasem mówiąc, na razie mamy ten i eksportujemy ten komponent, który tworzy koniec.
Teraz w pościgu za aplikacjami możemy zacząć korzystać z tego komponentu.
Czy widzieliśmy coś na ekranie, więc chodźmy tam i zaimportuj nawigator posiłków z nawigacji nawigator
posiłków.
Teraz, jak wspomniałem, nawigator posiłków jest teraz tylko składnikiem reagującym, więc ostatecznie możemy to
po prostu zwrócić, zamiast wracać do widoku z naszym tekstem tutaj.
Zwrócę nawigator posiłków, a ponieważ jest to element reagujący, mogę po prostu
przećwiczyć kod J Isaaca z tatą, jeśli go uratujemy.
Przyjrzeliśmy się naszej aplikacji, która się ładuje
i konieczne może być ręczne ponowne załadowanie aplikacji.
Po ponownym załadowaniu powinieneś zobaczyć ekran kategorii, co oczywiście jest ogromne, ponieważ oznacza to, że
to działa.
Teraz zauważ również, że domyślnie wszyscy dostają ładny nagłówek, który ma domyślny wygląd platformy
dla IO, ponieważ jest czysty, płaski, ma pod nim cienką linię dla Androida, jest bardziej swobodny, ponieważ
ma niewielki cień.
Teraz oczywiście brakuje mu tytułu, a dowiesz się, jak możemy go dodać w
tym module, ale wyciągamy to z pudełka, a to automatycznie szanuje wszelkie nacięcia, które mogą być
konieczne, aby pozostać tak daleko, więc automatycznie używa takiego widok bezpiecznego obszaru i to wszystko, o
czym wspomniałem w ostatnim module kursu, gdy masz ten komponent i czasami go potrzebujesz, na
przykład podczas budowania aplikacji z reagującą nawigacją reaguj nawigacja już zawija twoje widoki w bezpieczny obszar, przynajmniej zrobi dużo
pracy, którą musielibyście wykonać, w przeciwnym razie upewni się, że nagłówek wygląda dobrze i
jest to wielka rzecz, ponieważ ręczne utworzenie nagłówka, który wygląda dobrze na wszystkich urządzeniach, jest
w rzeczywistości dość pracochłonne.
To właśnie tu dostajemy.
Oczywistym pytaniem jest teraz, w jaki sposób możemy dotrzeć do naszych innych ekranów.