Jak więc tutaj przypisać ikony?
Jak możemy zatem upewnić się, że używamy koloru, którego
chcemy użyć?
Zacznijmy od
koloru, zanim dodamy ikony. Podobnie jak w przypadku funkcji tworzenia
stosu nawigatora stosu, tworzenie dolnej
karty nawigatora również wymaga drugiego argumentu. Pierwszy argument to twój obiekt konfiguracyjny, w
którym konfigurujesz różne zakładki i
ekrany, na które wskazują, drugi argument to także obiekt, w którym możesz ogólnie skonfigurować nawigatora i
tam masz kilka ustawień.
Ponownie, oficjalne dokumenty są miejscem, gdzie można dowiedzieć się o
każdym ustawieniu tutaj, jednym z ważniejszych ustawień tutaj są opcje paska kart.
To kolejny obiekt, w którym możesz szczegółowo kontrolować wygląd paska kart, jego styl.
Możesz ustawić nieaktywny kolor odcienia, który jest kolorem, który ma obecnie karta, która jest nieaktywna.
Możesz ustawić aktywny kolor odcienia i właśnie tego tutaj
potrzebujemy, możesz również ustawić aktywny kolor tła i nieaktywny kolor tła, aby oczywiście
również zmienić tło zakładek, jeśli chcesz, a
zatem masz wiele możliwości, aby naprawdę dostosować to do swoich wymagań.
I tutaj ustawię aktywny kolor odcienia, ponieważ to wszystko,
czego tu potrzebuję, ale oczywiście nie wahaj się z tym bawić i zmienić kolory tła,
a także zmienić inne ustawienia i ustawię mój aktywny kolor odcienia na wartość moje stałe kolory, które
tu importuję, ustawię na kolory akcentujące kolor.
Nie używałeś go wcześniej, ale teraz
go użyję i to jest ten pomarańczowy kolor, który teraz mamy i dlatego łatwo
zmieniamy kolor aktywnej zakładki. Teraz to jedno, pamiętaj
też, że to oczywiście nie dodaje ikony, a jak by to
było,
nie mówimy nic o ikonie, którą chcemy dodać. Teraz, aby dodać ikonę, prosty wzór
myślę, że przechodzisz tutaj do konfiguracji trasy, więc do
konfiguracji, w której mapujesz ekrany na zakładki i używasz dłuższej formy, w
której dodajesz właściwość screen, a następnie dodajesz opcje nawigacji.
Nawiasem mówiąc, możesz to również zrobić bezpośrednio w komponencie, oczywiście dodając opcje
nawigacji, tak jak zrobiliśmy to
wcześniej, jednak ponieważ posiłki tutaj są w rzeczywistości nawigatorem, jedynym miejscem
dodawania opcji
nawigacji jest oczywiście tutaj lub też tutaj, utwórz nawigator stosu.
Tam możesz również ustawić klucz opcji nawigacji tutaj na drugim argumencie, na tym
obiekcie podajesz jako drugi argument, aby utworzyć nawigator stosu, w którym konfigurujesz
ogólny nawigator, aby dać temu samemu nawigatorowi pewne opcje nawigacji, ponieważ opcje nawigacji,
które przypisujemy nawigator posiłków, więc do nawigatora stosu są teraz opcje, które są uwzględniane
przez nawigator kart, który używa tego nawigatora posiłków jako nawigatora zagnieżdżonego, a opcje nawigacyjne, które możemy
tutaj ustawić, obejmują ikonę paska kart. Możemy tutaj dodać ikonę paska kart, a ikona paska kart jest właściwie funkcją. To nie jest pojedyncza ikona,
którą wskazujesz, ale zamiast tego jest to funkcja. Jest to funkcja, która odbiera informacje o kartach, które
możesz powiedzieć, powinna przejść tutaj, oto argument, który otrzymujemy automatycznie, ponieważ
ta funkcja zostanie oczywiście wywołana przez nawigację React i ikona paska kart, ta
funkcja tutaj, musi zwrócić ikonę, którą chcesz renderować dla tej karty, w tym przypadku
dla karty posiłków.
Oznacza to, że muszę mieć możliwość korzystania z ikon tutaj i do tego możemy importować jony lub dowolny
inny zestaw ikon, którego chcesz używać z @ expo / vector-icons.
Ponownie, nie krępuj się zainstalować
ten pakiet, zwykle powinien on zostać zainstalowany automatycznie podczas pracy z Expo, ale możesz po
prostu uruchomić npm install --save @ expo / vector-icons, aby mieć pewność, że masz zainstalowany i możesz użyć
dowolnego zestawu ikon chcesz, ale zawsze używam jonów przez cały kurs, będę się ich trzymać.
Dzięki temu możesz używać jonów jako składnika, jak nauczyłeś się wcześniej w trakcie kursu.
Więc tutaj możemy po prostu zwrócić takie jony do renderowania ikony jonowej, a teraz
możesz użyć dowolnej
nazwy ikony tutaj i tutaj Chcę użyć ios-restaurant, która
jest po prostu ikoną, którą znalazłem na liście ikon, ta lista
tutaj który pokazałem również wcześniej, oto ta
ikona ios-restaurant, którą wybrałem, której teraz używam, którą tu wskazuję.
To jest ikona, którą chcę
wyrenderować, dam jej rozmiar 25,
możesz z
nią eksperymentować, ale znalazłem 25, aby
wyglądać całkiem przyzwoicie na pasku kart i
kolorze, a to jest teraz ważne dla tabInfo. tintColor, ponieważ kolor, który tu ustawiliśmy, powinien oczywiście być naszym kolorem odcienia,
który tu ustawiliśmy.
Teraz oczywiście możemy na stałe zakodować to, aby pokolorować tutaj kolor
akcentujący, ale jeśli zmienimy go tam na dole, musimy pamiętać, że również tam go zmienimy.
Dobrą rzeczą jest to, dlatego właśnie ta funkcja powoduje, że nawigacja React wywołuje dla nas
tę funkcję i dostarcza nam istotnych informacji na temat tego, jak nasz pasek kart jest skonfigurowany w tym obiekcie
informacyjnym karty, i że na przykład zawiera ustawiony przez nas kolor odcienia , dzięki czemu możemy
dynamicznie pobrać to tutaj, aby pokolorować ikonę, tak że jeśli zmienimy tam kolor paska kart, zostanie on automatycznie
odzwierciedlony w naszych
ikonach na górze, więc mamy tutaj trochę wygody, z której możemy skorzystać tutaj .
Dzięki temu renderuję te ikony posiłków i ulubionych, możemy teraz zastosować podobne podejście, użyć dłuższej formy, w której ustawiliśmy tutaj ekran,
a następnie dodać tutaj opcje nawigacji, które zostaną połączone z dowolną nawigacją opcje, które ustawiliśmy na
ekranie ulubionych ale pamiętaj, że oczywiście możesz absolutnie również ustawić opcje nawigacji tutaj w
komponencie ekranu ulubionych, dlatego aby zachować to wszystko w jednym
miejscu, zrobię to w ustawionej tu nawigacji.
To są moje opcje nawigacji
dla tego ekranu, podobnie jak dla tego nawigatora, nawigatora posiłków, możemy oczywiście skonfigurować
opcje nawigacji dla ekranu, to właśnie zrobiliśmy
w całym module, i tam, chcę zrobić zasadniczo to samo, więc po prostu skopiuję
to, dodam tutaj do tego obiektu opcji nawigacji, a jedyną rzeczą, która różni się tutaj,
jest ikona, której chcę użyć, tutaj jest to ios-star zamiast ios-restaurant.
I dzięki temu, jeśli to zapiszemy, faktycznie pojawia się błąd, ponieważ ponieważ teraz
używam tutaj jsx, musimy zaimportować React, oczywiście tak działa React, ponieważ jsx za kulisami
jest przekształcany w React tworzenie elementu, jak wiesz, a zatem teraz po dodaniu importu
React tutaj w MealsNavigator. plik js. To działa, a teraz mamy ikony,
które automatycznie przyjmują nasz kolor odcienia i tak łatwo można dodawać ikony.
Teraz oprócz ustawienia ikony możesz również ustawić etykietę, a zobaczysz, że domyślnie
etykieta, posiłki i ulubione to po prostu identyfikator, który przypisaliśmy tutaj podczas konfigurowania naszych posiłków
nawigacyjnych i ulubionych.
Często ma to sens, ale jeśli chcesz mieć inną etykietę, to w opcjach
nawigacji ekranu ładowanych tutaj na tej karcie
możesz ustawić właściwość etykiety paska kart, a tam jest to tylko ciąg gdzie możesz mieć ulubione ze znakiem wykrzyknika,
a jeśli to ustawisz, zobaczysz, że teraz masz ulubione ze znakiem wykrzyknika
zamiast tylko ulubionych jak poprzednio.
Możesz więc zastąpić tę domyślną etykietę, która zakłada się, że zwykle jest to twój identyfikator, jeśli
chcesz inną, możesz ją zastąpić i oczywiście jest więcej opcji, które możesz ustawić i
dołączyć, znajdziesz link do oficjalnych dokumentów dla ten nawigator, w którym można dowiedzieć się wszystkiego
o opcjach, które można ustawić w samym nawigatorze, ale także o opcjach nawigacji na ekranach potomnych, a więc o zagnieżdżonych ekranach lub zagnieżdżonych
nawigatorach wewnątrz tego nawigatora po kartach, a więc o tym, co
tutaj konfigurujemy.