Pracujmy więc nad przeniesieniem całej logiki tutaj w nawigatorze aplikacji.
Zaczęliśmy od tego fikcyjnego stosu tutaj i jest to fajne, ale ostatecznie nie to, czego potrzebujemy.
Teraz to od Ciebie zależy, gdzie wykonasz tę konfigurację, ale ponieważ zrobiliśmy to zasadniczo wcześniej w
pliku nawigatora sklepu.
Będę też nadal to robić.
Nawet z tą nową logiką.
Więc zrobię nawigator aplikacji.
Pozbędę się tutaj mojego stosu i pozbędę się tego importu i pozbędę się tego
tutaj. Zostawię jednak kontener nawigacyjny i zresetuję ten import, ale ostatecznie to
zmieni. trochę.
Ale teraz przejdźmy do nawigatora sklepu tam przede wszystkim możemy usunąć ten import z reakcji nawigacja nie
będzie go potrzebować.
Na razie zostawmy resztę zamiast usuniętego importu, z którego możemy importować z stosu
nawigacji reagującej i wszystko jest już z losowania, a ze stosu reklam importujemy tworzenie nawigatora stosów z
rysowania ukośnego, importujemy tworzenie nawigatora rysowania.
Teraz możemy przewinąć w dół i pozostawić tutaj domyślne opcje nawigacji.
Na szczęście nazwa dzwonka i sposób, w jaki ogólnie konfigurujesz, i to, co możesz skonfigurować,
tak naprawdę nie zmieniło sposobu, w jaki zastosowałeś zmienioną konfigurację, a zatem to,
co zdecydowanie musi się zmienić, to ta część tutaj, nasz pierwszy nawigator stosów, który na razie powielę, a później usunę lub skomentowałem,
że mam porównanie obok siebie. Stworzę nową stałą, którą będę nazywał nawigatorem stosu produktów, abyśmy
nie mieli konfliktu nazw i że jest naprawdę oczywiste, że
będzie to stos stron. ekrany i robimy to za pomocą funkcji tworzenia stosu nawigatora za pomocą tej
funkcji, co pokazałem wam, zanim ta funkcja nie przyjmuje już żadnych parametrów, zamiast tego utworzę tutaj nową stałą produkty
Navigator.
Mamy teraz starcie nazwy, ale i tak zostanie ono usunięte.
I to jest teraz reagujący komponent komponentu funkcjonalnego i moglibyśmy w dół dla wszystkich
przechowywanych w osobnym pliku tylko dla tego porównania obok siebie i ponieważ mieliśmy wszystko w
tym pliku, zanim teraz skonfiguruję wszystkie te komponenty nawigatora za pomocą naszej nawigacji Konfiguracja tutaj w
tym pojedynczym podziale pliku jest zdecydowanie czymś, co można rozważyć.
Oto nasz nawigator produktów i zwrócę teraz nawigator stosu kropek Nawigator nawigacyjny, jak
się dowiedziałeś, oraz ekran kropki nawigatora stosu produktów, a wcześniej mieliśmy trzy ekrany, więc powtórzę
to dwa razy.
Więc mieliśmy tam trzy ekrany.
Teraz możemy je skonfigurować, przypiszmy nazwę do pierwszego ekranu, który będzie przeglądem produktów.
Teraz komponent, który powinien zostać załadowany, to komponent ekranu przeglądu naszych produktów.
Zasadniczo więc to, co mapowaliśmy wcześniej dla drugiego ekranu, to nazwa produktu.
Więc co mieliśmy tutaj i upewnij się, że zachowujesz te nazwy,
aby cała logika nawigacyjna była w Twojej aplikacji, ponieważ nie trzeba tego zmieniać, aby to nadal
działało, a tutaj składnik, który powinien zostać załadowany, gdy chcemy dotrzeć ten ekran jest
szczegółowym składnikiem ekranu produktu, tak jak mieliśmy tam na dole, zreformujmy go, a dla ostatniego ekranu nazwa to koszyk.
Co mieliśmy tutaj i chcemy przejść do ekranu serca właśnie tak.
Teraz ustawiliśmy ten stos nawigacji z nową logiką opartą na komponentach.
Teraz możemy zaimportować do nawigatora aplikacji, a dla taty musimy
po prostu dodać przed nim słowo kluczowe eksportu, aby ta stała została wyeksportowana tutaj w
tym pliku, aw nawigatorze aplikacji nie importujemy teraz nawigatora sklepu, ale importujemy nowo wyeksportowanego nawigatora produktów, który importujemy tutaj i
do naszego kontenera nawigacji możemy teraz dodać nawigator produktów w ten sposób i możemy
pozbyć się importu ekranu przeglądu produktów.
Teraz wróć do nawigatora sklepu.
Rzućmy okiem na te opcje.
Następnie opcje nawigacji, które mieliśmy tutaj na tym stosie.
Co z tym robimy?
Mamy właściwie dwie opcje w naszym nawigatorze produktów na starym nawigatorze ze starą logiką
- ikona czynu.
Ten stos powinien mieć w szufladzie, którą dodamy później. Drugą są nasze domyślne opcje nawigacji, które powinny
być stosowane na wszystkich ekranach, które są częścią tego nawigatora.
I faktycznie jest też trzecie miejsce, w którym konfigurujemy rzeczy w przeszłości.
I to było na niektórych ekranach.
Spójrzmy na ekran przeglądu produktów, który znajduje się w folderze sklepu, jeśli przewiniemy w dół.
Mieliśmy tę właściwość opcji nawigacji, którą dodaliśmy do obiektu funkcjonalnego ekranu przeglądu produktów i była to funkcja, w której
konfigurujemy takie rzeczy, jak tytuł nagłówka, ale także to, co znajduje się po
lewej i prawej stronie nagłówka, dzięki tej nowej logice.
Już tego nie robisz.
Zamiast tego możemy skopiować cały zestaw tutaj.
Wszystko to możemy skopiować.
Możemy to skomentować tutaj w komponencie ekranu i przejść do komponentu nawigatora aplikacji.
Przepraszam do kupowania komponentu nawigatora, w którym ustawiliśmy nawigację stosu, a teraz na
ekranie, gdzie chcemy mieć te opcje, możemy dodać trzeci rekwizyt, a to jest właściwość de options i dwie opcje.
Możesz parsować dokładnie to, co wcześniej miałeś w składniku, więc przekazanie funkcji jest prawidłowe.
Który otrzymuje parametr
danych NAF, który następnie zwraca obiekt konfiguracyjny, konkretna wartość tego parametru zostanie wprowadzona przez
nawigację w reakcji i nazwy konfiguracji, które możemy ustawić tutaj, rzeczy, które możemy skonfigurować, nie uległy
zmianie.
Więc nadal możemy ustawić tytuł nagłówka przed lub w lewo.
To wszystko jest dokładnie takie samo, jak się nauczyłeś.
Działa dokładnie w ten sam sposób.
Na szczęście teraz mogliśmy to zrobić tutaj i nawigator sklepu.
Ale to oczywiście szybko stałoby się bardzo duże, gdybyśmy mieli tutaj wszystkie różne konfiguracje
specyficzne dla ekranu.
Więc tak naprawdę nie zrobię tego tutaj.
Zamiast tego widzę dwie opcje.
Jednym z nich jest faktyczne konfigurowanie ekranu nawigatora stosu produktów w komponencie ekranu.
Drugim jest to, że po prostu trzymamy nasze opcje i takie podejście zastosuję.
Wracając do przeglądu produktów, skomentuję to z powrotem, ale teraz, tutaj nie ustawiliśmy już, działa jako
wartość dla propozycji opcji nawigacji, ale po prostu eksportujemy go jako stałą stałą, którą musimy nadać
nazwie, a ja Nazwie tę opcję ekranu Żadne opcje ekranu nie posiadają tej funkcji i eksportujemy ją
po nazwie.
Nie koliduje z eksportem komponentów, ponieważ robimy to z domyślną wartością tutaj.
Więc teraz eksportujemy funkcję konfiguracji, a następnie nawigator sklepu możemy ją zaimportować, więc oprócz
importowania ekranu przeglądu produktów z tego pliku, możemy teraz połączyć to
z importem nazwanym, w którym importujemy do opcji ekranu, a następnie tutaj dwie opcje na ten ekran.
Po prostu mijam wskaźnik na tej funkcji, nie wykonuj go, tylko skierowałem go.
Reagujmy na nawigację wykonaną dla Ciebie, aby mogła zmieścić się w konkretnej
wartości dla tej funkcji parametrów danych NAF jeden raz i przy tym ekranie jest skonfigurowany.
Teraz, jeśli uratujemy te kolizje reklam, ponieważ mamy tam tę nazwę.
Aby rozwiązać ten problem, upewnijmy się, że wszyscy obsługujemy pozostałe opcje.
Teraz opcja rysowania jest czymś, na co przyjrzę później, kiedy dodamy losowanie dla domyślnych
opcji nawigacji.
Dobrą wiadomością jest to, że wciąż możemy zastosować te, których nie musimy konfigurować wszystkiego na poziomie ekranu.
Jeśli mamy wspólną konfigurację, która wpływa na wszystkie ekrany nawigatora.
Jak myślisz, jak możemy tutaj skonfigurować takie ogólne opcje dla wszystkich tych bezpłatnych ekranów.
Ustawiliśmy je bezpośrednio w nawigatorze.
Mamy też małą właściwość opcji ekranu, więc nie nazwane opcje, ale opcje ekranu.
Są to jednak opcje, które zostaną zastosowane na każdym ekranie tutaj, a opcje specyficzne dla ekranu
zostaną połączone z tymi ogólnymi opcjami, tak jak wcześniej w trakcie kursu.
Teraz przekazujemy nasz domyślny obiekt opcji nawigacji.
Więc ten obiekt tam po prostu podaję to jako wartość opcji ekranowych i to wszystko.
Teraz możemy komentować jako nawigator produktów i zapisać wszystko.
Teraz, gdy to zrobimy, nadal nie widzimy rezultatu, ponieważ w tym pliku nawigatora sklepu wciąż mamy
dużo kodu, który używa starego nawigatora lub starej logiki nawigatora i powoduje tutaj problem.
Teraz, aby nadal zobaczyć wynik, tymczasowo skomentuję to wszystko tylko tymczasowo i zapiszę
ponownie.
Aby to się odbudowało i zobaczysz, że teraz pojawia się błąd.
Cóż, jest jedna rzecz, którą faktycznie musimy dostosować, a składnik przeglądu produktu w naszej
opcji ekranu steruje nagłówkiem w lewo.
To musi być teraz funkcja, która zwraca nasz znacznik JSA X i to samo dla prawego nagłówka.
Musimy więc przekonwertować obie funkcje na funkcje i możesz to zrobić, dodając pustą listę parametrów, a
następnie strzałkę tutaj.
Na marginesie możesz zaakceptować parametr tutaj, jeśli chcesz, i to byłyby rekwizyty, ponieważ tak naprawdę
jest to teraz element reagujący, znajdujący tutaj konkretną wartość dla rekwizytów i
poprzez reakcję nawigacji oraz wartości, które można uzyskać z tego miejsca, mogą być znalezione w
oficjalnych dokumentach z tą zmianą dokonaną, jeśli teraz zapewniamy bezpieczeństwo, teraz ponownie się tutaj uruchomi i ponownie zobaczymy ten ekran.
Teraz zdecydowanie wybieramy naszą konfigurację.
Pamiętaj, że losowanie nie zadziała, ponieważ nie dodaliśmy jeszcze losowania i nawigacji, dlatego
też nauczyliśmy się, jak możemy konfigurować nasze komponenty, nasze ekrany i ogólny nawigator
stosów z nową logiką.
Nadszedł czas, aby kontynuować portowanie Zdecydowanie możesz wykonać kolejne kroki samemu i port,
aby wyświetlić określone opcje dotyczące szczegółów produktu i ekranu karty, a następnie przejdziemy do następnego
stosu.
I oczywiście również pozwać do losowania.