Dzięki temu dodaliśmy zakładki i tak, na ulubionych
nie robimy jeszcze nic,
to coś,
co będziemy śledzić, ale przynajmniej mamy zakładki. Zanim zaczniemy pracę nad ulubionymi, popracujmy jeszcze trochę
nad kartami, ponieważ w tej chwili mamy karty na Androidzie, które tak naprawdę nie wyglądają tak, jakbyśmy
oczekiwali, że będą wyglądać karty Android, to bardziej przypomina karty iOS, jeśli mnie o to zapytasz .
Jasne, że to działa i możesz zachować to,
jeśli chcesz, aby był to styl, który chcesz, nic złego z tym, ale fajniej byłoby mieć
bardziej specyficzny wygląd Androida, a do tego mamy oddzielny nawigator, który możemy stworzyć, chociaż musimy zainstalować dodatkowy pakiet dla tego
przede wszystkim, więc zróbmy to.
Pozwól mi wyjść z tego serwera tutaj i uruchomić npm
install - zapisz, a teraz to reaguj-nawigacja-materiał-dolne-zakładki, przy okazji jest też reakcja-nawigacja-materiał-górne-zakładki, nie zagłębię się w to ten kurs
tutaj, ale w załączeniu znajduje się również link, w którym można dowiedzieć się
więcej o tym alternatywnym nawigatorze. W tym miejscu użyjemy nawigatora
dolnych zakładek materiału i zainstalujemy ten pakiet, tak to zaczynamy.
Poczekajmy więc na zakończenie tej instalacji, a następnie zainstalujmy jeszcze jeden pakiet,
którego będziemy również potrzebować z instalacją npm - zapisz, a to będzie reagować na rodzimy papier. Więc zainstalujmy to również, a kiedy ta instalacja zostanie zakończona, uruchommy
ponownie serwer
expo z npm
start ponownie, ponieważ teraz zainstalowaliśmy pakiety, które
pomagają nam renderować alternatywny nawigator kart i na szczęście jest bardzo
prosty w użyciu i ma prawie taki sam lub bardzo podobny podobne
opcje konfiguracji niż nawigator dolnej zakładki, szczególnie jeśli chodzi
o konfigurację ikon i tak dalej. W załączeniu znajdziesz wszystkie dokumenty dotyczące
tego
alternatywnego nawigatora i jeszcze jednego alternatywnego nawigatora, o którym wspomniałem, i skorzystajmy z niego, importując z nowo
zainstalowanego pakietu nawigatora reaguj-nawigacja-materiał-dolne zakładki tutaj, a stamtąd możemy importować tworzenie tutaj funkcja nawigatora
dolnej zakładki materiału.
Teraz upewnij się, że masz również import platformy, ponieważ teraz będziemy go
potrzebować, ponieważ chcę używać tego nawigatora zamiast nawigatora
tworzenia dolnej karty, jeśli jesteśmy na Androidzie. Tutaj możemy sprawdzić, czy platforma. os jest równe systemowi Android i w
takim przypadku chcę użyć nowej funkcji nawigatora tworzenia dolnej zakładki materiału, którą właśnie
zaimportowałem,
w przeciwnym razie po dwukropku użyjemy nawigatora dolnej zakładki, którą skonfigurowaliśmy w poprzednim wykładzie.
To oczywiście pozostawia nam jedno pytanie, jak działa nawigator dolnej zakładki materiału? Jak to skonfigurujemy?
Dobra wiadomość jest taka, że ogólnie działa tak samo jak nawigator dolnej zakładki.
Istnieje kilka szczegółów, które możesz skonfigurować w samym nawigatorze
kart, na przykład, jaki kolor należy przyjąć, kiedy i tak
to się różni, ale w jaki sposób konfigurujesz karty i dopasowujesz ekrany oraz konfigurujesz ikony,
to dokładnie to samo, dlatego mogę faktycznie wziąć całą konfigurację ekranu tutaj, wyciąć ją
stąd i zapisać w osobnej stałej tutaj, którą nazwiemy tabScreenConfig, możesz nazwać ją,
jak chcesz, ponieważ
można ją ponownie wykorzystać, a teraz użyj tabScreenConfig jako pierwszego argumentu zarówno w nawigatorze dolnej zakładki,
a także w nawigatorze dolnej zakładki materiału, podobnie jak to i pozostawia nam tylko drugi argument,
który przekazujemy do nawigatora dolnej zakładki materiału i tylko nawigatora dolnej zakładki.
Ten drugi argument, który przekazujemy, ten obiekt, który przekazujemy jako drugi argument, jak się nauczyłeś, pozwala
nam skonfigurować sam nawigator tabulatorów, na przykład skonfigurować opcje paska tabulatorów, takie jak aktywny
kolor odcienia, i to nieco się różni, ponieważ w przypadku nawigatora dolnych kart materiału , nie ustawiamy opcji paska kart, aby skonfigurować
nasz aktywny kolor odcienia, zamiast tego mamy
tutaj bezpośrednio aktywny kolor odcienia w tym samym obiekcie, w nawigatorze dolnych kart, mieliśmy to w zagnieżdżonym
obiekcie, w opcjach paska kart , nie
mamy tego tutaj.
Zamiast tego tutaj po prostu ustawiliśmy aktywny kolor odcienia na kolor akcentujący i są też
inne ustawienia, na przykład możesz ustawić przesunięcie na true, a ja pokażę, co
to robi,
a co fałsz w sekundę, a wraz z tym, na razie tyle. Jeśli teraz to zapiszemy, przebuduje to nasz projekt i przeładuje go na
ekranie, a my mamy te same zakładki, co wcześniej w
iOS,
które się nie zmieniły,
ale w Androidzie mamy teraz nawigator kart z bardziej
materiałowym wyglądem, w którym możemy teraz również zmieniaj w ten sposób i to
ten efekt przesunięcia, który tutaj widzisz, że karty rosną, że etykieta istnieje tylko na karcie, która jest
aktywna, a jeśli przy
okazji ustawisz tutaj przesunięcie na false, po prostu nie masz tego efekt, wtedy zawsze masz
tam również swoje etykiety na Androidzie.
To jest teraz wygląd, który wygląda trochę bardziej
jak Android, powiedziałbym, dlatego jest to wygląd, który chcę tu mieć i możesz pójść o krok dalej.
Powiedzmy, że chcemy tutaj zmienić cały kolor tła paska
kart w
zależności od wybranej karty i mieć ładny efekt falowania, który zmienia to po drodze.
W tym celu możemy przejść do naszej konfiguracji ekranu i tam do opcji nawigacji i tam
mamy ikonę paska kart.
Możemy również ustawić tutaj kolor paska kart, gdy ta karta jest zaznaczona,
aby na przykład ustawić kolor podstawowy na kolory, a teraz ważne, ma to wpływ tylko wtedy, gdy ustawisz przesunięcie na
true, w przeciwnym razie prop kolor paska paska które tutaj konfiguruję, nie przyniesie żadnego efektu, ponieważ obsługuje to tylko
efekt przesunięcia, a teraz będziemy mieć ten efekt, że jeśli to zapiszę, uzyskaj taki sam wygląd
w systemie iOS, ponieważ jest tam pasek kart kolor nie ma wpływu, ale teraz widzisz,
naprawdę mamy nasz podstawowy kolor jako tło, jeśli posiłki są wybrane,
jeśli wybieramy ulubione, które zmieniają się na inny kolor.
Teraz ta zmiana oczywiście nie wygląda tak pięknie, dlatego możemy ją po prostu zmienić, nadając
naszym ulubionym ekranom własny kolor paska kart.
Można więc powiedzieć, że w opcjach nawigacji ekranu ulubionych obok ikony paska kart ustawiliśmy
tam kolor paska kart na kolor akcentujący, a teraz będziemy mieli inny pasek kart, który zmienia kolor z głównego
na posiłki tutaj ten akcentujący kolor dla ulubionych z tym ładnym efektem marszczenia i oczywiście wadą jest
to, że nie widzimy ikony, ponieważ kolor akcentujący kolor paska kart nie jest dobrym
wyborem,
jeśli nasz kolor odcienia jest również kolorem akcentującym.
Więc jeśli użyjemy tego efektu, możemy chcieć użyć tutaj bieli jako koloru odcienia, który zawsze możemy
zobaczyć zarówno w stosunku do koloru podstawowego, jak i akcentu, a zatem w przypadku aktywnego koloru odcienia, możemy chcieć użyć bieli
zamiast naszego akcentu kolor, ponieważ biały będzie działał na obu kartach, bez względu na to, czy pasek kart
zostanie następnie zabarwiony na kolor podstawowy, ten ciemnofioletowy czy akcentowany kolor, ten pomarańczowy, a zatem teraz widzimy, że
mamy tutaj ten efekt i tę
ładną falę zmieniamy na druga zakładka tutaj dla ulubionych. I myślę, że jest to całkiem słodka i łatwa
do wdrożenia zmiana, która sprawia, że ten wygląd świetnie wygląda na Androidzie i z pewnością daje nam bardziej
charakterystyczny wygląd podobny do Androida, zachowując domyślny wygląd iOS, którego można oczekiwać na tej platformie, jest naprawdę łatwy
do wdrożenia, ponieważ móc powiedzieć.
A teraz krótka uwaga: jeśli nie chcesz użyć tego efektu przesunięcia, którego
chcę tutaj użyć, ale jeśli nie chcesz go użyć, to oczywiście możesz zauważyć, że
kolor tła twoich kart na Androidzie jest nie jest to podstawowy kolor, ale zamiast tego jest to nieco jaśniejszy fioletowy, fioletowo-niebieski kolor.
Teraz zazwyczaj możesz też to zmienić i jak
widać, kolor paska kart po prostu nie ma wpływu,
działa to tylko z przesunięciem.
Teraz, jeśli chcesz zmienić kolor tła dla całego paska kart w etui bez przesunięcia, wszystko, co
musisz zrobić, to skonfigurować konfigurację samego nawigatora kart, ponieważ wpływa on teraz na cały pasek kart, możesz skonfigurować właściwość
stylu
paska i to po prostu obiekt stylu, w którym można na przykład ustawić kolor
tła na podstawowe kolory, tak jak to, a to po prostu zmienia kolor tła
paska nawigacji dla naszego dolnego paska Androida tutaj.
Więc w ten sposób możesz to zmienić, jeśli nie chcesz tutaj używać wzoru przesunięcia,
wyglądu przesunięcia.
Włączę ponownie zmianę, ponownie ustawimy
to na prawdę, ponieważ naprawdę podoba mi się ten kolorowy pasek kart, myślę, że
to naprawdę ładny wygląd z efektem falowania, który zmienia kolor i tak łatwo jest zaimplementować
różne paski kart.
Ponownie, istnieje wiele opcji konfiguracji zarówno dla samego paska kart, jak i opcji nawigacji ekranów, które
masz wewnątrz paska kart, a zatem znajdziesz oficjalne dokumenty dołączone, w których możesz zagłębić
się w każdą opcję i eksplorować i baw się z nimi.