Chcę więc zacząć od drobnego dopasowania czcionek w moich zakładkach tutaj, w nagłówku, a także w
tekście we wszystkich moich przepisach. Chcę się upewnić, że wszędzie używam właściwej czcionki, własnych
czcionek niestandardowych, a zwłaszcza tutaj, w nagłówku, na kartach, nie zapewniamy jeszcze tego.
Oczywiście stosunkowo łatwo
to zapewnić i zacznijmy od nagłówka. Nagłówek jest ogólnie stylizowany, podobnie jak kolor tła, z naszymi
domyślnymi opcjami nawigacji, które zawsze ustawiamy w prawym
nawigatorze stosu, domyślne opcje nawigacji tutaj pozwalają nam nadać styl nagłówkowi i na przykład nadać nagłówkowi
ogólny styl i dodaj kolor tła.
Teraz ważne jest, aby rozpoznać, że styl nagłówka jest tak naprawdę skierowany tylko na pole, że
można powiedzieć tło, więc w pojemniku, w którym znajdują się elementy akcji, przycisk Wstecz i ten tytuł, sam tytuł
nie może być kierowany stylem
nagłówka, ale oczywiście mamy alternatywę dla tego. Oprócz stylu nagłówka, w którym możemy stylizować
ten kontener nagłówka, otrzymaliśmy również styl nagłówka, który, co nie dziwi, jest ukierunkowany na komponent tekstowy,
w którym prezentowany jest nasz tytuł nagłówka, i tam możemy stylizować go tak, jak możemy stylizować elementy
tekstowe w React Native, na przykład dodając rodzinę czcionek open
sans, ponownie używam wersji niepogrubionej, aby szybko zobaczyć różnicę.
Chyba nie jest to już odważne, widać to wyraźnie, szczególnie tutaj na iOS, a teraz, jeśli ustawię
to na pogrubienie, zapewniam, że używam tego odpowiedniego stylu zarówno
na iOS, jak i Androidzie. Nawiasem mówiąc, w tym przypadku możemy również zastąpić
tę domyślną czcionkę systemową, która jest domyślną czcionką systemową, ustawiając styl nagłówka z tyłu, to osobne ustawienie, które możemy
skonfigurować
tu i tam, możemy również ustawić rodzinę czcionek na powiedzmy, że otwarte sans, a
nie odważna wersja, nie chcę
mieć tego w odważnym stylu, ale chcę mieć to we własnej czcionce i powinno to być teraz
otwarte sans tutaj i używać mojej własnej czcionki. W Androidzie oczywiście nie ma to żadnego efektu, ponieważ
nie ma tam odwrotnego tekstu. Więc to jedno,
to jest nagłówek, dla zakładek jest dość podobny. Tam możemy przejść do naszego nawigatora kart, który tworzymy,
podobnie jak nawigator
dolnej
zakładki materiału, a to oczywiście ma nasz tabScreenConfig, a następnie ten drugi obiekt, w którym konfigurujemy
samego nawigatora
i jak zawsze w nawigacji React, jest to drugi obiekt, w
którym może kontrolować ogólny wygląd i działanie specyficznych dla nawigatora elementów, takich jak
w przypadku nawigatora kart, kolor ikony karty, kolor paska, kolor odcienia lub także styl etykiety, a także tutaj, w opcjach
paska zakładek nawigator w dolnej zakładce, możemy dodać styl etykiety
i ponownie, ten cel jest skierowany
na komponent tekstowy, który przechowuje naszą etykietę, możemy dodać
tutaj rodzinę czcionek OpenSans-Bold, abyśmy mogli wyraźnie zobaczyć różnicę, jeśli to się przeładuje, teraz to
wyraźnie to pogrubiony tekst. To naprawdę nie wygląda źle, więc
myślę, że możemy to zachować, ale
oczywiście możesz ustawić ją tak, aby po prostu otwierała sans, jeśli chcesz cieńszą wersję,
ale teraz użyłbym własnej czcionki. Teraz dla
Androida, tutaj nawigator dolnej zakładki materiału ma również pewne opcje konfiguracji, ale tak naprawdę
nie ma stylu etykiety.
Zamiast tego możesz zrobić to na oddzielnych kartach, które ładujesz, więc na opcjach nawigacji ładowanych kart,
gdzie również ustawiasz ikonę paska kart i tak dalej, możemy dodać etykietę paska kart tutaj, gdzie moglibyśmy ustawić etykietę taką
jak posiłki, wiele znaków objaśniających, aby zastąpić to, co używamy teraz jako etykiety zarówno na iOS, jak
i na Androidzie, i może to być tak naprawdę ciąg znaków, ale możesz również
ustawić to na składnik React, aby komponent tekstowy, a mianowicie, możesz skonfigurować etykietę, posiłki, ale oczywiście
tutaj możesz dodać styl i dodać dowolny styl.
To trochę obejście, ponieważ nie ma innego wbudowanego sposobu stylizowania tego w nawigatorze
dolnych zakładek materiału, ale lepiej niż nic.
Więc tutaj możemy teraz ustawić rodzinę czcionek na OpenSans-Bold, a jeśli to zrobimy, oczywiście musimy również upewnić
się, że teraz zaimportujemy komponent tekstowy z React Native, ponieważ w przeciwnym razie nie
będziemy mogli go używać tam i teraz z tym , otrzymujemy to również na naszym
iOS, ponieważ udostępniamy konfigurację, naprawimy to za sekundę, ale teraz w ten sposób
możemy również ustawić własny styl, ale oczywiście straciliśmy kolor co jest wadą ręcznego ustawiania tego tutaj, a ponieważ potrzebujemy tylko
tego obejścia tutaj, dla Androida, dla dolnych kart materiału, najłatwiejszym rozwiązaniem jest użycie interfejsu API platformy i ustawienie etykiety paska
kart tylko na ten komponent tekstowy, jeśli „ ponownie na Androidzie, ponieważ tylko
wtedy potrzebujemy tego obejścia, aby ustawić rodzinę czcionek. Więc sprawdzę, czy jesteśmy na Androidzie i jeśli
tak jest, zwrócę tutaj komponent tekstowy, w przeciwnym razie po prostu zwrócę posiłki tekstowe, a zaletą zwrócenia tutaj tekstu
jest po prostu to, że nasz drugi ustawienia, które określają kolor odcienia i styl etykiety
itd., zostaną uruchomione i nie zostaną zastąpione. Jeśli ustawimy własny komponent tekstowy, wyłączymy tę domyślną funkcję,
wszystkie te domyślne funkcje, które są wbudowane w nawigator dolnej zakładki.
Problem z nawigatorem dolnej zakładki materiału polega na tym, że po prostu nie ma
wbudowanych
tych wszystkich domyślnych funkcji, więc musimy to zmienić, ale musimy to zrobić tylko dla Androida.
Teraz możemy to skopiować i zrobić dokładnie to samo,
oczywiście dla ulubionych, renderować ulubione jako tekst w iOS i oczywiście również w komponencie tekstowym dla Androida, a dzięki temu powinniśmy mieć styl,
który działa i to wygląda dobrze . Tam na iOS w zasadzie
nic nie zmieniliśmy, a na Androidzie mamy teraz własne niestandardowe czcionki.
Jest to więc trochę obejścia, które jest
wymagane tutaj niestety podczas pracy z nawigatorem dolnych kart, ale również nie jest zbyt trudne do wdrożenia,
a dzięki temu upewniamy się, że wszędzie używamy własnej niestandardowej czcionki w nawigacji cechy
naszej aplikacji.