React Native: Nested navigators

0.62.2+

0:00W ostatnich lekcjach zrobiliśmy nawigację czyli mamy nawigację stackową

0:04wcześniej zrobiliśmy nawigację tab bar no i teraz chcielibyśmy to połączyć i tutaj

0:08dochodzimy do bardzo fajnej rzeczy jaka jest jaka występuje właśnie w react navigation że

0:13możemy to sobie zagnieżdżać do woli to znaczy wykorzystajmy

0:18sobie tutaj nasz tab navigation tab navigator który

0:22już stworzyliśmy wcześniej okej

0:27jest okej oczywiście teraz będzie wyskakiwać mam błąd

0:31że nie mamy naszego stacka co ciekawe jeśli przejdziemy na naszą

0:36listę elemnt details wrzucimy

0:40tutaj do tego co było poprzednio zrobimy profile mimo że zobaczcie że mamy

0:46tylko tab nawigatora nie mamy żadnego stacka to jednak react navigation

0:51jest na tyle mądry że będzie wiedzieć że chodzi o przeniesienie się na inną zakładkę co

0:56co w wielu przypadkach może być fajnie bo nie interesuje nas to w jaki sposób ma dojść do nawigacji

1:00tylko react navigation sam dojdzie do najbliższego węzła

1:04który ma taką nazwę i tam nas przeniesie więc to jest bardzo fajne no ale akurat nie o to

1:08do końca nam chodziło tutaj

1:13wyskoczył nam jakieś okej i teraz zamiast

1:18listy zostawmy wstawmytu nasz tu nasz stack navigator po prostu czyli

1:23do lewej zakładki do pierwszej zakładki wstawiamy po prostu

1:27zamiast naszej listy wstawiamy cały stack navigator i co się stanie i w tym momencie

1:33zbudujemy sobie projekt na nowo mamy naszą listę w pierwszej zakładce

1:37mamy nasz profil w drugiej zakładce i możemy sobie dowolnie

1:41a oczywiście nie zmieniłem tutaj na details

1:45i zobaczcie że jeśli jesteśmy na liście i klikniemy w element to jesteśmy nawigowani

1:49wewnątrz tej zakładki czyli ja mogę sobie zmienić tą zakładkę ale po powrocie tutaj

1:54dalej jestem zagnieżdżony w tym stacku który jest wyświetlany jak widać zresztą

1:58tu jest nagłówek tutaj tego nagłówka nie ma ponieważ tutaj mamy pojedynczy screen a

2:02tu mamy screen i to jest bardzo fajne bo zazwyczaj jednak jest

2:06tak że wewnątrz takiej jednej zakładki będzie to bardziej to bardziej zagnieżdżone zobaczymy

2:11jak wygląda na androidzie też fajne mimo że animacja jest

2:15z dołu to jednak dalej to wszystko jest wewnątrz jednej zakładki ja mogę sobie między tymi zakładkami przechodzić

2:19natomiast teraz możemy pójść też o krok dalej i zrobić sobie modal

2:26stack navigator skopiujemy

2:31sobie naszego stacka i

2:36tu usuniemy aj nie to chciałem zrobić

2:41usuniemy sobie nasze opcje usuniemy sobie tutaj nasze

2:45opcje tylko

2:49tak header mode ustawimy sobie na none nie

2:53chcemy i ustawimy sobie ekran

2:58pierwszy jako nasz główny no i ekran drugi jako na

3:02przykład nazwiemy to modal details natomiast nasz pierwszy

3:06komponent to będzie i znowu wchodzimy w incepcję to będzie nasz tab

3:11navigator który

3:16nie został zaimportowany okej

3:28i zamiast tak to tutaj modal stack

3:35i ten modal stack wrzucimy do naszej aplikacji jako

3:39główny jako główny

3:43navigator no i co się

3:48stanie na wszelki wypadek przebudujmy sobie naszą apkę

3:52generalnie nie stanie się nic jak

3:57widać wszystko działa tak jak działało ale dodajmy

4:02sobie na przykład obsługę żeby po kliknięciu

4:06na upgrade albo po kliknięciu na dodaj tutaj żeby nas gdzieś przenosiło

4:10czyli wracamy do naszej listy mamy

4:15obsługę on add task i teraz zróbmy sobie navigate tylko

4:21do modal details i w parametrach przekażmy info

4:25po prostu new task added i

4:31tyle i zobaczymy co się stanie nic się nie stało a

4:35to dlatego że nowy task nie został dodany okej widzicie nawigacja

4:41widok szczegółów który jest nad tab barem ponieważ tab bar jest

4:45zagnieżdżony w tą główną nawigację tak jak jeszcze raz to pokażę bo może być to mylące

4:49czyli w naszej aplikacji mamy nasz główny stack navigator wewnątrz niego mamy

4:54ekran który jest głównym ekranem którym

4:58tab navigator oj przepraszam wewnątrz

5:03którego mamy dopiero ekrany listy która

5:07tak naprawdę nie jest pojedynczym ekranem ale stack nawigatorem w którym to dopiero jest lista

5:11i w którym są szczegóły tak może być trochę zagmatwane natomiast fajne jest to że możemy dowolnie

5:16sobie te nawigatory zagnieżdżać i w łatwy sposób nawigować patrzcie że ja z poziomu

5:21to do listy jakby ja nie nie interesuje mnie za bardzo jak ten madal opakowany

5:25gdzie on jest gdzie on występuje po prostu sobie wywołujemy metodę navigate do model details

5:29przekazuje jakieś informacje i to już nie moja sprawa co tam się będzie z tym działo i to jest bardzo fajne czyli

5:33cała ta obsługa cała ta otoczka cała ta cały ten kontener jest gdzieś dla mnie

5:37transparentny ja po prostu wywołuję metodę navigate

5:41możemy zrobić jeszcze jedną rzecz która spowoduje że to będzie bardziej naturalnie wyglądało czyli

5:47jeśli przejdziemy sobie do naszego modal stack navigatora to

5:52możemy sobie tutaj wybrać opcję mode

5:57zdaje się tak możemy sobie wybrać cart który z domyślnie

6:01właśnie czyli że wyjazd jest jakby z boku albo modal to by jakby

6:06na iOS-ie i w tym momencie jak klikniemy przepraszam

6:11jak klikniemy tutaj to nasza nawigacja wyjeżdża z dołu tak i

6:16jesteśmy w stanie teraz jest to bardziej odczuwalne w androidzie może nie będzie aż tak widoczne bo te animacje

6:20są podobne natomiast możemy sobie oczywiście te animacje dowolnie

6:24nadpisać nie będziemy się tym co prawda zajmować ale możemy sobie zrobić dowolną animację jaka nam się

6:28podoba tutaj gestem zjechania w dół możemy to schować fajnie by było

6:33jednak to jakoś

6:37obsłużyć inaczej więc możemy sobie w naszym details dodać

6:42button i to już będzie zwykły button żeby się nie bawić w opakowywanie

6:46nazwiemy go sobie back i po on press

6:52no właśnie i chcielibyśmy jakoś wrócić stąd natomiast no to znowu nie jest

6:56żaden problem w przypadku react navigation bo możemy użyć sobie naszego

7:00use navigation który

7:04taką funkcję jako go back w tym momencie dodał

7:10nam się przycisk i możemy zarówno z poziomu tego wewnętrznego wrócić

7:15jak i z tego będzie modalnego widoku również możemy sobie wrócić

7:21do poprzedniego ekranu znowu fajne jest to że tak naprawdę naszego modal naszego

7:25details screen nie interesuje czy jest wyświetlany modalnie czy on jest wyświetlany jako stack navigator jako card

7:29on wie że on po prostu chce wrócić i fajne jest to w react navigation że cała ta

7:34filozofia cała ta logika która stoi za tym wszystkim jest trochę przynajmniej ukryta i dopóki

7:38nie dochodzimy do jakichś naprawdę takich edge-case'owych przypadków gdzie chcemy zrobić customowe

7:42zagnieżdżone rzeczy to jest dla nas wszystko super i tak samo nawet

7:46takie rzeczy jak obsługa właśnie przejścia między zakładkami jest domyślnie wspierana

7:51myślę że to tyle jeśli chodzi o nawigację i w następnym rozdziale powiemy

7:55sobie trochę o tym jak uładnić naszą aplikacje animacjami dzięki