React Native: Stack navigation

0.62.2+

0:00Okej to na poprzedniej lekcji zrobiliśmy sobie fajną nawigację zakładkami

0:04tab bar navigation wygląda to naprawdę spoko a teraz

0:08chcielibyśmy się zająć troszeczkę innym rodzajem nawigacji w sumie takim w sumie bardziej podstawowym czyli

0:13stack navigatorem oczywiście jak to w przypadku react navigation musimy sobie doinstalować paczkę

0:18doinstalujmy sobie tą paczkę ze stackiem okej

0:23tak naprawdę w tej chwili to co będziemy robić i wygląda bardzo podobnie do tego co

0:27już zrobiliśmy to znaczy dalej musimy stworzyć sobie

0:31navigator nazwiemy go nasz stack navigator js

0:35na dobrą sprawę możemy przekopiować

0:39wszystko co jest w tab navigatorze z tą różnicą że nie

0:44będziemy importować bottom

0:49nawigacji tylko sobie zaimportujemy sobie create stack

0:54navigator a tutaj zrobimy sobie stack wywalimy

0:59sobie wszystkie opcje i zobaczcie że tak to był nasz navigator

1:04z zakładkami tutaj sobie tylko to jeszcze zmienimy na stack navigator

1:09tak konstrukcja

1:13jest dokładnie taka sama czyli tak naprawdę możemy sobie zaznaczyć nasze taby wkleić stack

1:17i to jest tyle tak więc to w tym momencie mamy załatwioną nawigację

1:22stackową a musimy tylko gdzieś ją wyświetlić więc użyjmy do tego tutaj

1:26naszego app js

1:30wstawimy tutaj stack navigator

1:34musimy go zaimportować nie udało się zrobić tego automatycznie

1:38navigator from stack navigator

1:44okej no

1:49i zobaczymy co się stało to co się zmieniło

1:53to to że zauważcie że doszedł nam header dlatego że stack navigator

1:57z defaultu ma właśnie taki nagłówek który możemy oczywiście

2:01sobie customować i zaraz o tym powiemy natomiast jak widać na

2:05androidzie on się trochę różni i on pozwala na właśnie nawigację w głąb i wszerz

2:09wszerz w głąb przepraszam i zaraz przejdziemy sobie taką

2:14nawigacją gdzieś w głąb czyli przejdźmy sobie do naszego todo listy i

2:18na przykład zróbmy tak żeby w momencie jak klikam w item przenosiło nas

2:23na profil jakby to wyglądało zrobimy

2:27sobie potrzebujemy jakiegoś obiektu który nas będzie nawigować

2:31i do tego użyjemy sobie takiego hooka use

2:35navigation hook który jest importowany z paczki głównej

2:40ponieważ jest jakby niezależny od konkretnego

2:44nawigatora no i w tej paczce w tym hooku ten hook zwraca nam

2:49funkcje navigate i teraz możemy sobie po

2:53kliknięciu nawigować navigate do i tutaj musimy

2:57podać nazwę którą podawaliśmy w naszym nawigatorze czyli list profile

3:01w przypadku tab navigatora mamy chyba te same nazwy dokładnie więc

3:06przejdźmy sobie do profilu i zobaczmy

3:10co się stanie tutaj nasz use callback prosi o to żeby dodać navigate

3:15do dependencj array i spokojnie możemy to dodać dlatego że tak jak w przypadku reduxa dispatch

3:19ten navigate się nie będzie zmieniać więc nie musimy się martwić o to że coś tutaj będzie nie tak ale warto mieć to

3:23zaktualizowane okej przychodzimy naszego flippera

3:27odświeżmy sobie żeby mieć pewność że to działa okej no i popatrzmy co się dzieje przeszliśmy

3:33sobie do szczegółów właściwie do naszego profilu jak widać tutaj też zmieniła

3:37się został dodany header z nazwą naszego

3:41screena i możemy se przechodzić mamy obsługę natywnego cofania na

3:45iOS-ie w przypadku androida ta animacja wygląda trochę inaczej bo po

3:50prostu jest defaultową animacją od androida piątki zdaje się tak to wyglądało

3:54super tylko trochę nie ma dla mnie sensu żebyśmy z listy

3:58przychodzili na jakiś profil więc dodajmy sobie nowy widok nazwijmy

4:03go sobie details screen kropka

4:08js i niech to będzie bardzo prosty komponent który tak

4:12naprawdę będzie zawierał tylko

4:16jakiś tekst który będziemy wyświetlać okej

4:23dodajmy sobie coś takiego jak info text nasz tekst

4:33nie jest zaimportowany no

4:38i możemy tylko text align center dać nic więcej nie potrzebujemy w sumie ewentualnie

4:42sobie font size zmienimy na przykład na 30 pikseli

4:46znaczy 30 punktów to zmienimy na

4:50white i jeszcze to wszystko sobie justify-content center

4:57align items center super

5:02i ten tekst sobie wyświetlmy info text

5:07something okej

5:14i do naszej listy do naszego stacka nawigatora

5:18zamiast tego profilu dodajmy sobie widok details

5:22dodajemy nasz detail screen okej

5:26zobaczmy czy coś się stanie teraz w tej chwili tak

5:30dostaniemy wyjątek dlatego że nie ma takiej ścieżki jak profile w tym momencie

5:34bo została nam usunięte i to jest okej więc musimy

5:38w naszej liście przepraszam że tak tutaj poskakałem zmienić

5:43to na details i co się dzieje w tym momencie przechodzimy

5:48na nasz widok tak samo się dzieje na androidzie fajnie

5:52natomiast chcielibyśmy żeby zamiast something coś się wyświetlało na przykład właśnie wartość

5:56tego tego pola i jest to bardzo prosta sprawa

6:01ponieważ drugi parametr naszej funkcji navigate to jest tak naprawdę lista parametrów

6:05obiekt z parametrami jakie chcielibyśmy przekazać i dla nas to będzie info i

6:09to co przekażemy to będzie właśnie item info okej

6:14czyli już ten parametr przekazujemy teraz

6:18musimy jakoś to wyświetlić najłatwiej będzie to po prostu wyciągnąć z propsów dlatego że w

6:22propsach będziemy mieli dorzucony taki parametr jak route i w nim będzie

6:28obiekt params i w nim będzie ten obiekt który sobie tutaj nazwaliśmy

6:32czyli info zobaczmy

6:37jak wygląda element 0 element 15 element 7

6:48super co możemy jeszcze tutaj

6:52zrobić no na przykład pomajstrować trochę przy tym nagłówku

6:57bo wygląda on dość średni czyli znajdź przejdźmy

7:01sobie do naszego stack navigatora i podobnie tak jak w tab navigation mogliśmy sobie zmieniać co chcieliśmy tak samo tutaj a

7:05tylko już nie globalnie albo zróby jedną rzecz globalnie pokażę

7:10wam coś takiego jak header mode i to możemy sobie ustawić ten header mode możemy

7:15go wybrać na none i zobaczcie że wtedy znika nam header na górze ale nie

7:20chcemy tego robić chcemy wejść w ten nagłówek natomiast chcielibyśmy żeby on trochę

7:24inaczej się nazywał więc mamy coś takiego jak options i

7:29w tych options mamy zdaje się że

7:33to się nazywało header title tak jest header title

7:38i na przykład niech to będzie main page

7:43i proszę bardzo nasz status się zmienia chcemy

7:47jeszcze poprawić żeby details to się trochę inaczej nazywało albo w sumie

7:51details jest okej natomiast nie chcemy żeby ta strzałka tutaj miała

7:55nazwę naszego tytułu co jest domyślnie na iOS-ie tylko zróbmy sobie options

8:01i mamy takie parametr jak header

8:05back title i nazwijmy

8:11to na przykład back po prostu zobaczmy co się stanie

8:15i mamy naszą strzałkę back moglibyśmy sobie to wywalić żeby nie było żadnej strzałki ale myślę że z back

8:19to jest okej sprawdźmy na androidzie fajnie jest

8:24jeszcze jedna rzecz o której chciałem powiedzieć a to znaczy to że my możemy

8:28sobie w tych opcjach przepraszam tutaj screen options możemy zrobić trochę

8:37więcej bo mamy dostęp do headera i my możemy w

8:41tym headerze zwrócić co nam się podoba co jest bardzo fajne bo często

8:46mamy wymagania bardzo customowego wyglądu

8:51tego headera i w tym momencie ten

8:56header jest kompletnie taki jak sobie życzymy oczywiście w związku z tym nie będą działały te

9:00przyciski wstecz nie będzie takiej opcji żeby wyświetlać

9:04nagłówek musielibyśmy sami to zaimplementować natomiast jeśli byśmy mieli taką potrzebę to możemy

9:09sobie coś takiego dodać jest wtedy bardzo fajnie okej

9:13wróćmy jednak do naszej podstawowej działającej wersji jest

9:17super tylko no gdzieś nam zniknął profil i w następnej lekcji chciałbym żebyśmy

9:21połączyli te dwa nawigatory i stworzyli sobie taką pełną nawigację naszej aplikacji