React Native: Tab navigation

0.62.2+

0:00W poprzedniej lekcji skonfigurowaliśmy sobie naszą

0:04nawigację pobraliśmy wszystkie paczki teraz czas zacząć z

0:08tego korzystać zaczniemy sobie to od tab nawigatora

0:12jak widzicie to też osobna paczka którą musimy doinstalować więc dokładnie tak zrobimy tutaj

0:18świetnie ona nie korzysta

0:22z żadnych natywnych nie tworzy żadnych natywnych zależności nic nie musimy sobie doinstalować

0:27naszych potsów a to

0:31co możemy zrobić to może tak zróbmy sobie osobny plik żeby gdzieś tam nie robić

0:37sobie tutaj za dużo zamieszania nazwijmy go sobie nasz tab navigator

0:42kropka js tworzymy nowy komponent nazwiemy go tab

0:51navigator tab navigator

0:55co tutaj będzie przede wszystkim

1:01musimy zaimportować sobie metodę z

1:06react navigation bottom tabs która

1:11nam stworzy nasz navigator więc tak tworzymy sobie

1:15consta tab równa się create bottom tab navigator i jak

1:21wygląda konstrukcja takiej nawigacji z bottom

1:25barem tak jak mówiłem dwa podstawowe elementy naszej

1:30nawigacji to jest navigator więc tworzymy sobie taki nasz navigator to

1:35się trochę różni jeśli widzieliście przykłady kodu albo

1:40macie taki projekt nad którym pracujecie albo będziecie pracować i zobaczycie że ta nawigacja wygląda trochę inaczej

1:44to najprawdopodobniej dlatego że korzystacie z wersji 4 albo wcześniejszej react navigation

1:49my w tej chwili korzystamy z wersji 5 i ona ma tam troszkę inny

1:53inną formułę inaczej troszkę się korzystaa z tej nawigacji

1:57ale migracja nie jest jakaś cięzka więc jeśli macie w

2:01wersji v4 spokojnie do v5 możecie przyjść nie ma takich olbrzymich

2:05zmian no i teraz zrobiliśmy sobie nasz navigator no i teraz zróbmy sobie

2:10nasze screeny taki screen przyjmuje dwa propsy które

2:14są wymagane po pierwsze to jest nazwa czy dokładniej name title tak

2:18dokładnie to jest name i nazwijmy to sobie list

2:23tak ponieważ mamy naszą listę todo a komponentem ojej

2:27komponentem będzie

2:31nasza todo list swietnie drugim

2:35drugą zakładką będzie nasz profil i

2:41tutaj naszym komponentem będzie profile screen okej

2:45to nam nie jest potrzebne i tak naprawdę tyle stworzyliśmy

2:49nasz prosy nawigator i użyjemy go w tej chwili w naszej aplikacji po

2:53prostu go dodamy tutaj tab navigator

2:58okej no dobra i zobaczmy

3:02co się stało wygląda

3:07okej ale dla pewności jeszcze raz to przygotujemy i zobaczcie mamy nasze

3:12zakładki zarówno na iOS-ie i androidzie działa to wygląda

3:17i działa to bardzo podobnie a więc fajnie i tak naprawdę zrobiliśmy naszą

3:21podstawową obsługę naszej nawigacji jest

3:25jeszcze jedna rzecz o której warto wspomnieć w przypadku nawigacji bo tak naprawdę ona nie jest jakaś zbyt skomplikowana

3:29to jest to że w momencie pierwszego

3:33wejścia na nasz ekran czyli jeśli wchodzę tutaj to oczywiście

3:37ten ekran ten komponent bo ten ekran jest naszym kompanem się

3:42montuje i jak zmieniam zakładkę po raz pierwszy to ten komponent też jest montowany natomiast

3:46przy kolejnych zmianach one już sa jakby wczytywane z pamięci ale może być taka sytuacja że

3:50będziemy chcieli żeby coś się działo po przejściu na

3:54tą zakładkę na przykład no teraz

3:58możemy żeby po prostu coś się logowało i jeśli wejdziemy sobie do

4:02naszego profile screenu i

4:08to nam nie jest potrzebne i zrobimy sobie tutaj efekt który

4:15będzie wywołany tylko raz okej

4:24nie jest to zaimportowane i zobaczymy

4:32sobie to w logach okej

4:38widzimy że nasz profil się zamontował natomiast przy kolejnych przejściach już nie

4:43no bo tak jak mówiłem on jest wczytywany z pamięci ale może być tak że właśnie przy tej

4:47zmianie tych zakładek będziemy chcieli coś robić biblioteka daje nam taką możliwość daje

4:51nam hooka którego musimy zaimportować sobie z

4:56zaraz zobaczymy skąd import from react navigation

5:00chyba native zaraz zobaczymy i hook

5:04się nazywa create nie

5:09przepraszam use focus effect dokładnie tak i

5:14teraz jak to wygląda use focus effect a

5:19tutaj mamy i w niej możemy zamieścić

5:24to co chelibyśmy żeby było wywoływane za każdym razem jak zmieniamy

5:28zakładkę zobaczymy w

5:33przebudujmy sobie nasz projekt wyczyśćmy

5:38logi okej to

5:45działa tylko jakby nasz widzicie tutaj flipper nie chce żebyśmy

5:49zostali zasypani takimi samymi wiadomościami więc on je grupuje w związku

5:54z tym jeśli poprzedzę to jakimś innym eventem

5:58to zauważcie że to się dzieje natomiast co się stanie jeśli ja zacznę tutaj

6:02pisać widzicie że tutaj się ta liczba zwiększa tak

6:08że ten profile mount wywołuje się wielokrotnie to

6:12wynika z tego się dwa razy pewnie tylko raz 11 razy to się po prostu trochę

6:16długo aktualizuje wynika to z tego z tego samego czego jakby korzystaliśmy

6:21w naszym render item to znaczy że ta

6:25funkcja jest anonimowa związku z tym z każdym renderem ona jest wywoływana na nowo co powoduje

6:30że gdzieś tam wewnątrz tego jest efekt wymaga wywoływana na nowo jest

6:34obsługa tego wszystkiego więc jeśli chcemy korzystać z use effecta to musimy też pamiętać to

6:38nie jest stricte znowu związane z react native tylko bardziej z samymi hookami żeby

6:42opakowywać takie rzeczy w callback use callback no i tutaj jeśli

6:47przeniesiemy sobie naszą funkcję ona

6:53nie ma żadnych zależności to

6:58w tej chwili powinno wszystko działać jak należy okej

7:05tutaj się troszeczkę tak wchodzimy mamy

7:09profile mount ale jak już zaczynamy pisać coś ustawiać

7:13to nic się nie zmienia profile mount jest jeden dokładnie o to chodziło więc

7:19to taka mała rzecz o której warto pamiętać a wracając do naszej nawigacji no działa

7:23to spoko ale fajnie byłoby gdybyśmy troszkę ostylowali te nasze

7:27zakładki bo nie wygląda to najlepiej i do tego mamy tutaj trochę opcji

7:31mamy coś takiego jak screen options screen

7:36options w których mamy tab

7:43bar label tab bar label przyjmuje funkcję

7:47która musi zwrócić komponent najlepiej

7:51tekstowy który będzie właśnie wyświetlany czyli możemy tutaj zrobić na przykład tab

7:561 zobaczmy coś

8:01poszło nie tak oczywiście nie jest to zaimportowane więc nasz

8:06bundler nie wie o co chodzi jest okej i mamy nasze zakładki tak one nawet działają

8:10ale no nie do końca chyba nam o to chodziło więc możemy

8:14to troszeczkę zmienić czyli zamiast używać

8:18screen options w ten sposób to screen options użyjemy w ten

8:22sposób czyli wywałamy to jako funkcję

8:27jeśli

8:31się nie pochrzaniłem z tym wszystkim to powinno dalej działać spróbujmy

8:36okej działa dlaczego

8:40chciałem użyć tego jako funkcji dlatego że tutaj w parametrach dostajemy

8:44może nawet to będziemy mieć odpowiedziach dokładnie mamy

8:48route i teraz to co możemy zrobić to co domyślnie jest tutaj robione

8:52to jest route name i będziemy mieli to co tak naprawdę

8:56mieliśmy na początku no właśnie i teraz możemy sobie zrobić tutaj

9:01prosty warunek że jeśli route name to się równa profile to

9:07wyświetl profile a w przeciwnym wypadku

9:11wyświetl list czyli może wiele to nie wnosi ale pokazuje że

9:15dokładnie mamy nad tym pełną kontrolę podobnie jak w przypadku naszego

9:19labelka tak który jakby wyświetla się pod jakby na dole

9:23naszej zakładki możemy zrobić z ikonką czyli

9:27tab bar icon jest funkcja i tutaj możemy na przykład zwrócić view

9:32ostylować je na szybko takie

9:37view niech ma na przykład width 10 height

9:4210 jakiś background color i wygląda to w ten sposób

9:49oczywiście zgodnie ze sztuką przerzucamy to tutaj

9:53nazwiemy to sobie tab icon to

9:58się na styled view i mamy width

10:05może nawet trochę większą dam 10px

10:10heigth 20px i

10:14background color no niech to będzie okej

10:18a bez tego gray świetnie okej zobaczmy

10:29jak to wygląda jest znośnie możemy

10:33zrobić jeszcze tab round icon tab

10:40square icon weźniemy

10:45w ten sposób że to przepraszam

10:49to damy na górze a

10:53tu po prostu dopiszemy border-radius 10 pikseli

10:58i uzyjemy tego samego warunku

11:02którego użyliśmy tutaj czyli jeśli route name

11:06chcemy profil to niech to zwróci nam

11:11komponent tab square w przeciwnym wypadku niech to zwróci nam tab

11:15round okej no i

11:19spoko i wygląda to teraz całkiem fajnie oczywiście jest jeszcze jedna rzecz o której

11:24zapomniałem i możemy ją sobie na przykład tutaj dopisać w parametrach funkcji

11:28tab bar label i tak samo dostaniemy takie pole jak focus i na przykład możemy

11:32tutaj focus i możemy ten

11:36parametr sobie użyć czyli że na przykład przekażmy tutaj focus focus

11:40focus równa się focus

11:46na przykład dodajmy że jeśli niech to będzie opacity

11:50korzystam z przekazywania propsów do styled components

11:54p kropka focus równa

11:59się no po prostu if p kropka focus a wtedy na przykład

12:031.0 w przeciwnym parku 0.7 zobaczmy

12:070.2 może na przykład dajmy

12:12może nie jest to widoczne focus

12:17przepraszam to powinno być okej

12:24no i teraz widzimy że zakładka na której jesteśmy jest zaznaczona

12:28a i to myślę że tyle jeśli chodzi o naszą nawigację

12:32tab barową i zaraz powiemy sobie o nawigacji stackowej