1
00:00:02,230 --> 00:00:09,790
Chcę więc zacząć od drobnego dopasowania czcionek w moich zakładkach tutaj, w nagłówku, a także w

2
00:00:09,970 --> 00:00:15,940
tekście we wszystkich moich przepisach. Chcę się upewnić, że wszędzie używam właściwej czcionki, własnych

3
00:00:15,940 --> 00:00:19,930
czcionek niestandardowych, a zwłaszcza tutaj, w nagłówku, na kartach, nie zapewniamy jeszcze tego.

4
00:00:20,050 --> 00:00:22,970
Oczywiście stosunkowo łatwo

5
00:00:22,990 --> 00:00:31,040
to zapewnić i zacznijmy od nagłówka. Nagłówek jest ogólnie stylizowany, podobnie jak kolor tła, z naszymi

6
00:00:31,040 --> 00:00:34,200
domyślnymi opcjami nawigacji, które zawsze ustawiamy w prawym

7
00:00:34,210 --> 00:00:40,640
nawigatorze stosu, domyślne opcje nawigacji tutaj pozwalają nam nadać styl nagłówkowi i na przykład nadać nagłówkowi

8
00:00:40,640 --> 00:00:43,390
ogólny styl i dodaj kolor tła.

9
00:00:43,470 --> 00:00:50,750
Teraz ważne jest, aby rozpoznać, że styl nagłówka jest tak naprawdę skierowany tylko na pole, że

10
00:00:50,750 --> 00:00:59,540
można powiedzieć tło, więc w pojemniku, w którym znajdują się elementy akcji, przycisk Wstecz i ten tytuł, sam tytuł

11
00:00:59,660 --> 00:01:02,390
nie może być kierowany stylem

12
00:01:02,390 --> 00:01:08,420
nagłówka, ale oczywiście mamy alternatywę dla tego. Oprócz stylu nagłówka, w którym możemy stylizować

13
00:01:08,420 --> 00:01:14,300
ten kontener nagłówka, otrzymaliśmy również styl nagłówka, który, co nie dziwi, jest ukierunkowany na komponent tekstowy,

14
00:01:14,300 --> 00:01:20,420
w którym prezentowany jest nasz tytuł nagłówka, i tam możemy stylizować go tak, jak możemy stylizować elementy

15
00:01:20,420 --> 00:01:23,960
tekstowe w React Native, na przykład dodając rodzinę czcionek open

16
00:01:23,960 --> 00:01:27,280
sans, ponownie używam wersji niepogrubionej, aby szybko zobaczyć różnicę.

17
00:01:27,320 --> 00:01:35,560
Chyba nie jest to już odważne, widać to wyraźnie, szczególnie tutaj na iOS, a teraz, jeśli ustawię

18
00:01:35,560 --> 00:01:40,240
to na pogrubienie, zapewniam, że używam tego odpowiedniego stylu zarówno

19
00:01:40,240 --> 00:01:46,280
na iOS, jak i Androidzie. Nawiasem mówiąc, w tym przypadku możemy również zastąpić

20
00:01:46,540 --> 00:01:53,380
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

21
00:01:53,380 --> 00:01:53,930
skonfigurować

22
00:01:53,950 --> 00:01:59,110
tu i tam, możemy również ustawić rodzinę czcionek na powiedzmy, że otwarte sans, a

23
00:01:59,140 --> 00:02:01,350
nie odważna wersja, nie chcę

24
00:02:01,360 --> 00:02:07,600
mieć tego w odważnym stylu, ale chcę mieć to we własnej czcionce i powinno to być teraz

25
00:02:07,600 --> 00:02:13,470
otwarte sans tutaj i używać mojej własnej czcionki. W Androidzie oczywiście nie ma to żadnego efektu, ponieważ

26
00:02:13,470 --> 00:02:17,170
nie ma tam odwrotnego tekstu. Więc to jedno,

27
00:02:17,190 --> 00:02:24,660
to jest nagłówek, dla zakładek jest dość podobny. Tam możemy przejść do naszego nawigatora kart, który tworzymy,

28
00:02:24,660 --> 00:02:25,940
podobnie jak nawigator

29
00:02:25,950 --> 00:02:26,700
dolnej

30
00:02:26,880 --> 00:02:33,390
zakładki materiału, a to oczywiście ma nasz tabScreenConfig, a następnie ten drugi obiekt, w którym konfigurujemy

31
00:02:33,390 --> 00:02:34,440
samego nawigatora

32
00:02:34,440 --> 00:02:38,880
i jak zawsze w nawigacji React, jest to drugi obiekt, w

33
00:02:38,880 --> 00:02:44,270
którym może kontrolować ogólny wygląd i działanie specyficznych dla nawigatora elementów, takich jak

34
00:02:44,280 --> 00:02:52,280
w przypadku nawigatora kart, kolor ikony karty, kolor paska, kolor odcienia lub także styl etykiety, a także tutaj, w opcjach

35
00:02:52,280 --> 00:02:56,330
paska zakładek nawigator w dolnej zakładce, możemy dodać styl etykiety

36
00:02:56,330 --> 00:02:59,000
i ponownie, ten cel jest skierowany

37
00:02:59,000 --> 00:03:03,010
na komponent tekstowy, który przechowuje naszą etykietę, możemy dodać

38
00:03:03,140 --> 00:03:09,230
tutaj rodzinę czcionek OpenSans-Bold, abyśmy mogli wyraźnie zobaczyć różnicę, jeśli to się przeładuje, teraz to

39
00:03:09,230 --> 00:03:12,800
wyraźnie to pogrubiony tekst. To naprawdę nie wygląda źle, więc

40
00:03:12,800 --> 00:03:14,510
myślę, że możemy to zachować, ale

41
00:03:14,720 --> 00:03:18,920
oczywiście możesz ustawić ją tak, aby po prostu otwierała sans, jeśli chcesz cieńszą wersję,

42
00:03:19,010 --> 00:03:22,320
ale teraz użyłbym własnej czcionki. Teraz dla

43
00:03:22,320 --> 00:03:29,600
Androida, tutaj nawigator dolnej zakładki materiału ma również pewne opcje konfiguracji, ale tak naprawdę

44
00:03:29,720 --> 00:03:31,910
nie ma stylu etykiety.

45
00:03:31,910 --> 00:03:38,690
Zamiast tego możesz zrobić to na oddzielnych kartach, które ładujesz, więc na opcjach nawigacji ładowanych kart,

46
00:03:38,690 --> 00:03:47,170
gdzie również ustawiasz ikonę paska kart i tak dalej, możemy dodać etykietę paska kart tutaj, gdzie moglibyśmy ustawić etykietę taką

47
00:03:47,170 --> 00:03:54,160
jak posiłki, wiele znaków objaśniających, aby zastąpić to, co używamy teraz jako etykiety zarówno na iOS, jak

48
00:03:54,160 --> 00:04:00,490
i na Androidzie, i może to być tak naprawdę ciąg znaków, ale możesz również

49
00:04:00,490 --> 00:04:07,450
ustawić to na składnik React, aby komponent tekstowy, a mianowicie, możesz skonfigurować etykietę, posiłki, ale oczywiście

50
00:04:07,720 --> 00:04:11,490
tutaj możesz dodać styl i dodać dowolny styl.

51
00:04:11,500 --> 00:04:16,120
To trochę obejście, ponieważ nie ma innego wbudowanego sposobu stylizowania tego w nawigatorze

52
00:04:16,120 --> 00:04:19,060
dolnych zakładek materiału, ale lepiej niż nic.

53
00:04:19,060 --> 00:04:25,060
Więc tutaj możemy teraz ustawić rodzinę czcionek na OpenSans-Bold, a jeśli to zrobimy, oczywiście musimy również upewnić

54
00:04:25,060 --> 00:04:30,240
się, że teraz zaimportujemy komponent tekstowy z React Native, ponieważ w przeciwnym razie nie

55
00:04:35,760 --> 00:04:40,980
będziemy mogli go używać tam i teraz z tym , otrzymujemy to również na naszym

56
00:04:40,980 --> 00:04:45,780
iOS, ponieważ udostępniamy konfigurację, naprawimy to za sekundę, ale teraz w ten sposób

57
00:04:45,810 --> 00:04:52,820
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

58
00:04:52,820 --> 00:04:59,930
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

59
00:04:59,930 --> 00:05:04,760
kart tylko na ten komponent tekstowy, jeśli „ ponownie na Androidzie, ponieważ tylko

60
00:05:04,760 --> 00:05:11,330
wtedy potrzebujemy tego obejścia, aby ustawić rodzinę czcionek. Więc sprawdzę, czy jesteśmy na Androidzie i jeśli

61
00:05:11,330 --> 00:05:18,650
tak jest, zwrócę tutaj komponent tekstowy, w przeciwnym razie po prostu zwrócę posiłki tekstowe, a zaletą zwrócenia tutaj tekstu

62
00:05:18,650 --> 00:05:24,710
jest po prostu to, że nasz drugi ustawienia, które określają kolor odcienia i styl etykiety

63
00:05:24,710 --> 00:05:30,920
itd., zostaną uruchomione i nie zostaną zastąpione. Jeśli ustawimy własny komponent tekstowy, wyłączymy tę domyślną funkcję,

64
00:05:30,920 --> 00:05:34,700
wszystkie te domyślne funkcje, które są wbudowane w nawigator dolnej zakładki.

65
00:05:34,700 --> 00:05:39,200
Problem z nawigatorem dolnej zakładki materiału polega na tym, że po prostu nie ma

66
00:05:39,200 --> 00:05:39,800
wbudowanych

67
00:05:39,860 --> 00:05:44,690
tych wszystkich domyślnych funkcji, więc musimy to zmienić, ale musimy to zrobić tylko dla Androida.

68
00:05:44,780 --> 00:05:48,290
Teraz możemy to skopiować i zrobić dokładnie to samo,

69
00:05:48,290 --> 00:05:57,530
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,

70
00:05:57,590 --> 00:06:03,860
który działa i to wygląda dobrze . Tam na iOS w zasadzie

71
00:06:03,920 --> 00:06:09,740
nic nie zmieniliśmy, a na Androidzie mamy teraz własne niestandardowe czcionki.

72
00:06:09,740 --> 00:06:12,520
Jest to więc trochę obejścia, które jest

73
00:06:12,520 --> 00:06:19,130
wymagane tutaj niestety podczas pracy z nawigatorem dolnych kart, ale również nie jest zbyt trudne do wdrożenia,

74
00:06:19,130 --> 00:06:24,290
a dzięki temu upewniamy się, że wszędzie używamy własnej niestandardowej czcionki w nawigacji cechy

75
00:06:24,800 --> 00:06:25,850
naszej aplikacji.