React Native: react-navigation / nawigatory

0.62.2+

0:00W ostatniej lekcji zrobiliśmy sobie wykorzystaliśmy webview pokazaliśmy

0:04sobie że możemy sobie zagnieździć tak naprawdę całą stronę w naszej aplikacji ale

0:09możemy też zagnieżdżać fragmenty html i

0:13używać tego właśnie na przykład w aplikacjach z newsami a w tym

0:18momencie dochodzimy do chyba największej i najważniejszej funkcjonalności

0:22aplikacji czyli do nawigacji bo jakby rzadko się zdarza tak żeby nasza

0:26aplikacja składała się od jednego dwóch ekranów które na siebie nachodzą jednak jest

0:31to jakiś taka sama ścieżka którą użytkownik musi przejść widok logowania

0:35widoku głownego i tak dalej z racji tego że react native

0:39jest otwartym środowiskiem to tych nawigacji jest parę

0:43opcji dwie najpopularniejsze to jest react navigation i to jest

0:47numer jeden ale mamy też całkiem popularną aplikację jak react native navigation

0:51od wix i tak

0:55naprawdę obie są dość popularne jak widać wix ma prawie 12 tysięcy gwiazdek

1:01w przypadku react navigation jest chyba 15 16 zobaczymy jest to

1:0818 tysięcy gwiazdek a i może te liczby nie oddają tego wszystkiego natomiast ja

1:12osobiście korzystam z react navigation a to mam rozumieć że się najszybciej rozwija

1:16co ciekawe jest to stworzone napisane że funded

1:21między innymi przez expo team więc cała kwestia nawigacji z

1:26expo jest oczywiście tutaj w pełni wspierana nie będzie żadnych problemów że coś mogłoby nie działać więc

1:30z naszych podejmując wybór myślę że powinniście się wszyscy decydować ja się na to

1:35decyduje na react navigation dlatego że oczywiście react native navigation jak

1:39najbardziej też by działał jak widać jest aktualizowany całkiem na bieżąco

1:43no dobra react navigation to takie trochę react native w pigułce dlatego że od wersji

1:47zwłaszcza 5 w 4 też już chyba zaczęto tak do tego podchodzić

1:52wszystko jest rozbite na osobne paczki to znaczy tak naprawdę my instalujemy sobie najpierw paczkę

1:56ogólną która bazuje na wielu innych paczkach o

2:00których też zaraz powiem a natomiast jeśli chcemy sobie korzystać

2:04z jakiś konkretnych widoków to musimy je doinstalować zewnętrznie one

2:08wszystkie korzystają z tego core które sobie doinstalowaliśmy

2:13ma to swoje plusy ma swoje minusy natomiast ewidentnym plusem jest

2:17to że mogą się te projekty podprojekty tak naprawdę rozwijać

2:21trochę niezależnie więc zainstalujemy sobie zaraz nasz

2:25nasz react navigation naszą paczkę i odpowiednie

2:29paczki które są wymagane powiem tylko jeszcze na początku jak

2:34tą nawigację się je właściwie tak jak bym mógł opisać w skrócie czym

2:38właściwie ta nawigacja jest jak ona działa to mogę powiedzieć że najważniejszym elementem są

2:42dwa najważniejsze elementy tej nawigacji to jest navigator oraz

2:47screen i taki nawigator to jest po prostu kontener

2:51który przechowuje nam różne ekrany i zarządza tym kiedy

2:55dany ekran powinien się wyświetlać a ekran no to po prostu taki ekran

2:59w aplikacji jak mamy logowania ekran z jakąś listą i tak dalej i my będziemy

3:03się zajmować trzema najpopularniejszymi właściwie dwoma najpopularniejszymi ale wspomnę o trzech taki

3:08pierwszy to jest stack navigator to jest po prostu taki ekran w którym jesteśmy sobie w jakimś widoku

3:12klikamy przycisk i przenosi nas do innego widoku oraz tap navigation to

3:17jest taka nawigacja dolna bardzo popularna na JS-ie czyli po prostu mamy zakładki a

3:22i sobie między tymi zakładkami przychodzimy natomiast zanim przejdziemy jeszcze do

3:26tab navigation to sobie zainstalujemy wszystkie niezbędne paczki

3:30możecie wejść na stronę react navigation org i tutaj jest bardzo dobra dokumentacja

3:34tego wszystkiego wszystkich możliwości i konfiguracji w jaki sposób to robić

3:38jak widać tu jest osobno napisane jak to dokładnie robić dla expo więc

3:43zacznijmy od doinstalowania sobie głównego pakietu

3:49okej poszło zaskakująco szybko natomiast to co

3:54jest sercem tego react navigation to są te wszystkie paczki które zaraz

3:58tak pokrótce omówię musimy je doinstalować również i tak

4:02mamy tutaj paczkę react native reanimated to jest biblioteka dla powiedzmy zaawansowanych

4:06animacji ona wspomaga jak navigation

4:10w animacjach przejściach między ekranami mamy react-native-gesture-handler to

4:15jest biblioteka która pomaga w jak nazwa wskazuje w zarządzaniu w

4:20obsłudze gestów użytkownika mamy react-native-screens to jest biblioteka która mapuje nasze

4:24widoki w aplikacji na natywne widoki czyli tak jak wspominałem jest to

4:28ui view controller na iOS oraz fragment w androidzie mamy

4:33react-native-safe-area-context czyli to tak naprawdę to czego już trochę

4:37używaliśmy czyli to żeby te nasze kontenery z

4:42nawigacją też nie wychodziły poza to obszary które powinno i na koniec mamy react-native-community

4:46masked-view i to zapwene jest wykorzystywane również przy jakichś

4:50animacjach i przejściach zainstalujemy sobie te pakiety to

4:54może chwilę potrwać bo o tych pakietów trochę jest i na pewno te pakiety będą wymagały od

4:58nas doinstalowania poszło nawet szybko będą wymagały od nas doinstalowania paczek

5:03natywnych w iOS czyli wchodzimy sobie do folderu ios oczywiście tylko

5:07te osoby które korzystają z react native cli jeśli korzystamy z expo to nie musimy tego robić

5:11jak widać parę rzeczy nam się tutaj zainstalowało okej

5:16a i dla pewności wystartujemy jeszcze raz naszą

5:21aplikację bo jak instalujemy coś natywnie zmieniamy

5:25jakieś potsy i zainstalujemy to czasem nasz metro bundler

5:29sobie poradzi z tym czasem nie a dla pewności możemy to zrobić nie trwa to tak długo okej

5:34nasz ios się zbudował zobaczmy go na z androidem jest

5:41okej ważną rzeczą trzeba pamiętać na

5:45szczęście jest to wspomniałem tutaj jest ta kwestia znaczy ze względu na to że korzystamy

5:49z react native gesture handlera który czasem

5:53psuje pewne rzeczy wymagalne jest to żeby dodać

5:59takiego importa nad wszystkim w naszym pliku index js czyli

6:04przechodzimy sobie do naszego pliku index js i nad wszystkimi importami dodajemy sobie import react

6:08native gesture handler bez tego jak to zresztą jest napisane być może także będzie wszystko działać ale

6:13może być też tak że będziemy dostawać dziwne crashe na produkcji więc jeśli chcemy tego uniknąć no

6:19to lepiej to zrobić i tak mamy taki typowy błąd androidowy na

6:23iOS-ie to się zdaje że już się zbudowało okej

6:27spróbuję przebudowac projekt niestety nie więc

6:32spróbujmy przebudować projekt androidowy okej

6:38wszystko się skompilowało jakby nie udało się odpalić aplikacji

6:42ale myślę że to nie będzie problem jak sobie teraz odpalimy to

6:48jest okej tak że udało nam się załadować ten błąd bardzo często występuje przy instalacji tej paczki

6:52dlatego zawsze trzeba pamiętać żeby to przebudować i ostatnim krokiem do takiej pełnej

6:56konfiguracji jest zaimportowanie sobie navigation containera

7:01jako takiego głównego elementu który opakowuje

7:05naszą aplikację więc zaimporujemy sobie go w naszym app js i

7:10użyjemy jako taki nasz główny element powiedzmy

7:14na tym safe area i może na razie z tego safe area sobie

7:18odpuścimy ojej

7:22i tak naprawdę

7:27w ogóle zostawmy sobie tylko kontener to webview nie

7:31będzie nam potrzebne a to też nam nie będzie potrzebne już

7:35zbytnio okej

7:39no i zobaczmy czy tutaj mam

7:43wszystko działa odświeżmy sobie aplikację jest okej

7:49bo w sumie skoro wrzuciłem cały content więc się to buduje a no

7:53i tyle jeśli chodzi o konfigurację no i zaraz przyjdziemy do faktycznego wdrażania naszej nawigacji