Większość naszych plików nie musi się zmieniać.
Musimy jednak zmienić to, co dzieje się w plikach nawigacyjnych i folderze
nawigacyjnym w aplikacji J. S. pamiętasz renderowanie kontenera nawigacyjnego tutaj,
a kontener nawigacyjny jest tutaj tylko niestandardowym komponentem, w którym w końcu mamy logikę sprawdzania,
czy użytkownik jest uwierzytelniony, a następnie renderujemy nawigator sklepu, który jest naszym nawigatorem tras
utworzonym tutaj z nawigacją reagującą i właśnie tam rzeczy muszą się teraz zmienić.
Teraz zacznijmy od kontenera nawigacyjnego.
Nie będziemy już potrzebować tego kodu, w którym ręcznie nawigujemy w innym miejscu, jeśli użytkownik jest
uwierzytelniony, ponieważ później zobaczysz, że będzie on traktowany inaczej w przypadku konfiguracji opartej na komponentach, więc
możesz usunąć ten fakt tutaj.
Keep jest wyłączony tutaj, ale możesz usunąć ref tutaj tutaj, a także usunąć to tam, a jeśli chodzi
o import tutaj, nie potrzebujemy już dwóch haczyków i wszyscy nie potrzebujemy już tego importu.
Zostało nam tylko nawigatora sklepu, a to nie jest już tak naprawdę potrzebne.
Nie dodajemy Nawigatora sklepu jako komponentu takiego jak ten, w którym odnosimy się do ogólnej
konfiguracji z pliku nawigatora sklepu, ponieważ ta ogólna konfiguracja jest oczywiście skonfigurowana zgodnie ze
starą logiką posiadania takiej globalnej konfiguracji rejestru, która jest po prostu już nie działa z nawigacją
reagującą 5.
Zamiast tego musimy teraz przenieść to wszystko do nowego podejścia do tego podejścia opartego na komponentach i
to zrobić.
Chcę zacząć dość prosto w kontenerze nawigacyjnym.
Skonfiguruję nowy stos Navigator, który na razie jest tylko atrapą Navigatora.
Czy widzieliście, jak to na ogół działa, zanim będziemy później dobrze stosować
to do naszej prawdziwej aplikacji.
Dodajmy tutaj import z at reag.
Natywny ukośnik nawigacji.
Stamtąd musimy zaimportować nawigację do kontenera nawigacji.
To może być mylące, ponieważ naszym własnym komponentem jest cały nazwany kontener nawigacyjny.
Aby uniknąć nieporozumień tutaj, zmienię nazwę naszego komponentu tutaj na nawigator aplikacji lub cokolwiek, jak chcesz go
nazwać, więc zmienię nazwę tutaj i wszystko, aby uniknąć zamieszania, nawet jeśli nie
jest to technicznie wymagane w komponencie aplikacji w aplikacji tak zrobię zaimportowany jako nawigator aplikacji Zmienię nazwę
pliku na nawigator aplikacji i zaimportuję z nawigatora aplikacji tutaj w komponencie aplikacji, więc dostosuj ścieżkę importu, aby uwzględnić
tę nową nazwę pliku.
A potem renderuję nawigator aplikacji.
Właśnie wprowadziłem zmiany nazw, aby uniknąć nieporozumień.
Ważniejsza część dzieje się w tej aplikacji Navigator, która wcześniej była naszym kontenerem nawigacyjnym.
Teraz importujemy kontener nawigacyjny z React Native.
Ale tata będzie innym elementem niż ten, który budowaliśmy w przeszłości.
Po prostu ma tę samą nazwę i dlatego nazwałem ją ważniejszą niż ten kontener nawigacyjny.
Na razie zamiast tego importujemy coś ze stosu slash nawigacyjnego reklamy reagują.
A to jest teraz pakiet, który nie istnieje, którego jeszcze nie zainstalowaliśmy.
Zatrzymajmy więc ten proces jeszcze raz.
A dzięki npm install dash dash safe zainstalujmy przy reagującym ukośniku nawigacyjnym, więc NPM zainstalował
Ashutosh bezpieczny przy reagującym ukośniku.
Spowoduje to zainstalowanie w USA logiki nawigacji stosu i wszyscy możemy już zainstalować
pewną liczbę pakietów, ponieważ będziemy go później potrzebować, i to właśnie w reakcji na rysowanie
ukośnika nawigacji, która później da nam nawigację opartą na losowaniu, która również będzie potrzebować, więc poczekajmy na D do poleceń instalacji,
aby zakończyć, a następnie przy starcie silnika możemy ponownie uruchomić ten serwer expo, więc teraz zainstalowaliśmy stos Wietnamizacji.
Możemy z niego coś zaimportować i to jest coś, gdy D tworzy nawigator stosów.
Teraz utwórz stos Navigator to funkcja, którą znamy już w sklepie Navigator, która nadal korzysta ze
starej nawigacji reagowania, w której importujemy również, aby utworzyć nawigator stosu z nawigacji reagującej lub
jeśli pracujesz dla tego pakietu z osobnego pakietu.
Ale musieliśmy również utworzyć nawigatora stosów i utworzyć końce nawigatora rysowania.
Teraz użyliśmy funkcji tworzenia stosu nawigatora, aby utworzyć konfigurację konfiguracji, naszego rejestru nawigacji dla tej części naszej aplikacji. Można tak powiedzieć o
przeglądzie produktów o szczegółach produktu i ekranie karty, które
zestawiliśmy w jeden stos, a następnie mieliśmy wiele takich stosów aby je skomponować, aby
zebrać je w naszym losowaniu Nawigatora, który ostatecznie połączono z wyłączonym ekranem w nawigatorze przełączania.
Wróćmy teraz do naszego nawigatora aplikacji. Co robimy z tworzeniem nawigatora stosów tutaj.
Teraz działa inaczej.
Teraz używamy go do tworzenia nowego komponentu i nadam mu nazwę stosu.
Nazwa należy do Ciebie, ale po prostu call tworzy nawigator stosu i gotowe.
To jest teraz ogromna zmiana.
Teraz nie przekazujesz żadnego obiektu, aby utworzyć nawigatora stosu, aby go skonfigurować.
Zamiast tego jest to funkcja, która nie chce obiektu.
Jest to funkcja, która nie potrzebuje obiektu, więc co wtedy robi.
Jaki jest mój stos, mój stos jest teraz składnikiem reagującym, a konkretnie używamy go tutaj w nawigatorze
aplikacji.
Musimy owinąć całą logikę nawigacji komponentem kontenera nawigacji, który importujemy z
natywnej nawigacji nawigacji.
Możesz myśleć o tym komponencie kontenera nawigacji w zasadzie jako wersji komponentu kontenera aplikacji, który utworzyliśmy
przy użyciu kontenera aplikacji w starej konfiguracji.
Tam właśnie musieliśmy owinąć naszego gotowego nawigatora, tworząc kontener aplikacji.
Teraz musimy owinąć naszą gotową do skonfigurowania nawigację opartą na komponencie z kontenerem nawigacyjnym.
Więc tutaj ustawiliśmy teraz naszą logikę, jeśli chodzi o strony, które chcemy ładować.
I tutaj używamy teraz mojego stosu jako elementu reagującego, ale nie w ten sposób.
Ale zamiast tego potrzebujemy komponentu nawigatora DOT.
Tak więc moim stosem jest obiekt z właściwością navigator, a wartości przechowywane w
tej właściwości są teraz składnikiem.
Teraz możemy stworzyć ten komponent i między podatkiem początkowym i końcowym tego komponentu
umieszczamy teraz zasadniczo różne ekrany, które chcemy być częścią tego stosu.
Więc to, co poprzednio tutaj w nawigatorze sklepu mieliśmy w tym obiekcie, przekazaliśmy, aby utworzyć nawigator
stosu tę mapę komponentów ekranu i ich nazw.
To właśnie teraz konfigurujemy między tym otwierającym a zamykającym tagiem.
Dlatego możesz pomyśleć, że to, co robimy, dodajemy składnik ekranu przeglądu produktu.
Jest to jeden z naszych komponentów, do którego dodalibyśmy import, którego tutaj nie zrobiliśmy, ponieważ
jest to źle, ale możesz pomyśleć, że robimy to dobrze.
Z pewnością byłby to ekran, który chcemy mieć w ramach tego nawigatora, ale nie
miałby nazwy.
Teraz potrzebujemy nazwy, abyśmy mogli do niej nawigować, na przykład, abyśmy mogli uruchomić nawigację gdzieś w
naszej aplikacji.
Dlatego też mamy tutaj nazwę starej konfiguracji.
Zamiast tego robimy coś innego.
Ponownie używamy mojego stosu tego obiektu na górze, a teraz druga właściwość, która ma właściwość screen, podobnie
jak właściwość navigator, właściwość screen zawiera również składnik reagujący, a zatem możemy renderować go w
ten sposób.
To jest teraz komponent, który pozwala nam zdefiniować ekran, który powinien być częścią tego nawigatora
stosu tutaj i konfigurujemy go za pomocą rekwizytów, ponieważ pracujemy tutaj z komponentem, więc konfiguracja działa z rekwizytami
tak, jak zawsze w przypadku, gdy pracujemy z komponentami, aby nadać temu ekranowi nazwę, dodajemy
nazwę prop, a teraz możemy użyć tej nazwy, używamy tutaj przeglądu produktów, abyśmy mogli dodać tę nazwę i
poinformować nawigację, który komponent załadować, gdy kierujemy tę nazwę na kiedy robimy to z
akcją imigracyjną, na przykład dodajemy drugą podpórkę, podpórkę komponentu, która powinna trzymać wskaźnik na komponencie, który
chcemy załadować, gdy chcemy przejść do tego ekranu o tej nazwie.
W tym celu zaimportuję tutaj ekran przeglądu produktów z naszego folderu ekranów do podfolderu sklepu, a następnie ekran
przeglądu produktów.
Więc teraz tego potrzebujemy i zdałem, że jest tutaj.
Ważne, że nie tworzymy tutaj komponentu.
Wskazujemy na to, po prostu używamy jego nazwy, która jest eksportowana z tego pliku.
I dzięki temu mamy teraz swój pierwszy mały stos.
Teraz skomentujmy ten import z nawigatora sklepu.
Nie potrzebujemy tego w tej chwili.
Zapiszmy wszystko i uruchommy jego na Androida, powiedzmy.
A kiedy to zrobisz, buduje pakiet javascript i otwiera się na urządzeniu z Androidem.
Zobaczysz ekran przeglądu naszych produktów.
Oczywiście wygląda to nieco inaczej.
Oczywiście brakuje przycisków nagłówka.
Brakuje całej konfiguracji nagłówka.
Tytuł jest niewłaściwy, ale ma to sens, ponieważ nie używamy teraz starego nawigatora, w
którym mieliśmy całą tę konfigurację, ale nową, a to tylko dowód na to, że działa i jak działa.
Mając to na uwadze, zostawmy ten drobny przykład tutaj i przenieśmy całą naszą nawigację skonfigurowaną tutaj
na tę nową logikę.