1
00:00:02,350 --> 00:00:05,320
Dzięki temu dodaliśmy zakładki i tak, na ulubionych

2
00:00:05,330 --> 00:00:06,970
nie robimy jeszcze nic,

3
00:00:06,970 --> 00:00:08,370
to coś,

4
00:00:08,380 --> 00:00:14,070
co będziemy śledzić, ale przynajmniej mamy zakładki. Zanim zaczniemy pracę nad ulubionymi, popracujmy jeszcze trochę

5
00:00:14,070 --> 00:00:19,620
nad kartami, ponieważ w tej chwili mamy karty na Androidzie, które tak naprawdę nie wyglądają tak, jakbyśmy

6
00:00:19,620 --> 00:00:25,080
oczekiwali, że będą wyglądać karty Android, to bardziej przypomina karty iOS, jeśli mnie o to zapytasz .

7
00:00:25,080 --> 00:00:27,840
Jasne, że to działa i możesz zachować to,

8
00:00:27,840 --> 00:00:33,090
jeśli chcesz, aby był to styl, który chcesz, nic złego z tym, ale fajniej byłoby mieć

9
00:00:33,090 --> 00:00:39,300
bardziej specyficzny wygląd Androida, a do tego mamy oddzielny nawigator, który możemy stworzyć, chociaż musimy zainstalować dodatkowy pakiet dla tego

10
00:00:39,390 --> 00:00:41,180
przede wszystkim, więc zróbmy to.

11
00:00:41,860 --> 00:00:45,660
Pozwól mi wyjść z tego serwera tutaj i uruchomić npm

12
00:00:45,660 --> 00:00:53,490
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

13
00:00:53,490 --> 00:00:58,920
tutaj, ale w załączeniu znajduje się również link, w którym można dowiedzieć się

14
00:00:59,130 --> 00:01:04,170
więcej o tym alternatywnym nawigatorze. W tym miejscu użyjemy nawigatora

15
00:01:04,170 --> 00:01:09,130
dolnych zakładek materiału i zainstalujemy ten pakiet, tak to zaczynamy.

16
00:01:09,150 --> 00:01:13,800
Poczekajmy więc na zakończenie tej instalacji, a następnie zainstalujmy jeszcze jeden pakiet,

17
00:01:13,890 --> 00:01:25,240
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

18
00:01:25,240 --> 00:01:26,680
ponownie serwer

19
00:01:26,680 --> 00:01:28,720
expo z npm

20
00:01:28,810 --> 00:01:32,400
start ponownie, ponieważ teraz zainstalowaliśmy pakiety, które

21
00:01:32,560 --> 00:01:37,940
pomagają nam renderować alternatywny nawigator kart i na szczęście jest bardzo

22
00:01:37,970 --> 00:01:43,780
prosty w użyciu i ma prawie taki sam lub bardzo podobny podobne

23
00:01:43,780 --> 00:01:48,730
opcje konfiguracji niż nawigator dolnej zakładki, szczególnie jeśli chodzi

24
00:01:48,730 --> 00:01:54,730
o konfigurację ikon i tak dalej. W załączeniu znajdziesz wszystkie dokumenty dotyczące

25
00:01:55,000 --> 00:01:56,160
tego

26
00:01:56,290 --> 00:02:05,080
alternatywnego nawigatora i jeszcze jednego alternatywnego nawigatora, o którym wspomniałem, i skorzystajmy z niego, importując z nowo

27
00:02:05,080 --> 00:02:12,770
zainstalowanego pakietu nawigatora reaguj-nawigacja-materiał-dolne zakładki tutaj, a stamtąd możemy importować tworzenie tutaj funkcja nawigatora

28
00:02:12,830 --> 00:02:14,310
dolnej zakładki materiału.

29
00:02:14,450 --> 00:02:18,950
Teraz upewnij się, że masz również import platformy, ponieważ teraz będziemy go

30
00:02:18,950 --> 00:02:21,980
potrzebować, ponieważ chcę używać tego nawigatora zamiast nawigatora

31
00:02:21,980 --> 00:02:31,070
tworzenia dolnej karty, jeśli jesteśmy na Androidzie. Tutaj możemy sprawdzić, czy platforma. os jest równe systemowi Android i w

32
00:02:31,070 --> 00:02:36,830
takim przypadku chcę użyć nowej funkcji nawigatora tworzenia dolnej zakładki materiału, którą właśnie

33
00:02:36,830 --> 00:02:37,680
zaimportowałem,

34
00:02:37,740 --> 00:02:44,060
w przeciwnym razie po dwukropku użyjemy nawigatora dolnej zakładki, którą skonfigurowaliśmy w poprzednim wykładzie.

35
00:02:44,060 --> 00:02:50,880
To oczywiście pozostawia nam jedno pytanie, jak działa nawigator dolnej zakładki materiału? Jak to skonfigurujemy?

36
00:02:50,990 --> 00:02:56,750
Dobra wiadomość jest taka, że ogólnie działa tak samo jak nawigator dolnej zakładki.

37
00:02:56,750 --> 00:03:01,100
Istnieje kilka szczegółów, które możesz skonfigurować w samym nawigatorze

38
00:03:01,100 --> 00:03:05,670
kart, na przykład, jaki kolor należy przyjąć, kiedy i tak

39
00:03:05,690 --> 00:03:12,210
to się różni, ale w jaki sposób konfigurujesz karty i dopasowujesz ekrany oraz konfigurujesz ikony,

40
00:03:12,350 --> 00:03:18,650
to dokładnie to samo, dlatego mogę faktycznie wziąć całą konfigurację ekranu tutaj, wyciąć ją

41
00:03:18,650 --> 00:03:24,350
stąd i zapisać w osobnej stałej tutaj, którą nazwiemy tabScreenConfig, możesz nazwać ją,

42
00:03:24,350 --> 00:03:25,990
jak chcesz, ponieważ

43
00:03:26,240 --> 00:03:33,070
można ją ponownie wykorzystać, a teraz użyj tabScreenConfig jako pierwszego argumentu zarówno w nawigatorze dolnej zakładki,

44
00:03:33,080 --> 00:03:40,010
a także w nawigatorze dolnej zakładki materiału, podobnie jak to i pozostawia nam tylko drugi argument,

45
00:03:40,160 --> 00:03:45,290
który przekazujemy do nawigatora dolnej zakładki materiału i tylko nawigatora dolnej zakładki.

46
00:03:45,290 --> 00:03:51,330
Ten drugi argument, który przekazujemy, ten obiekt, który przekazujemy jako drugi argument, jak się nauczyłeś, pozwala

47
00:03:51,330 --> 00:03:56,730
nam skonfigurować sam nawigator tabulatorów, na przykład skonfigurować opcje paska tabulatorów, takie jak aktywny

48
00:03:56,990 --> 00:04:05,480
kolor odcienia, i to nieco się różni, ponieważ w przypadku nawigatora dolnych kart materiału , nie ustawiamy opcji paska kart, aby skonfigurować

49
00:04:05,480 --> 00:04:07,950
nasz aktywny kolor odcienia, zamiast tego mamy

50
00:04:07,970 --> 00:04:14,530
tutaj bezpośrednio aktywny kolor odcienia w tym samym obiekcie, w nawigatorze dolnych kart, mieliśmy to w zagnieżdżonym

51
00:04:14,570 --> 00:04:17,330
obiekcie, w opcjach paska kart , nie

52
00:04:17,330 --> 00:04:18,950
mamy tego tutaj.

53
00:04:18,950 --> 00:04:24,590
Zamiast tego tutaj po prostu ustawiliśmy aktywny kolor odcienia na kolor akcentujący i są też

54
00:04:24,590 --> 00:04:29,660
inne ustawienia, na przykład możesz ustawić przesunięcie na true, a ja pokażę, co

55
00:04:29,660 --> 00:04:30,800
to robi,

56
00:04:30,890 --> 00:04:39,550
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

57
00:04:39,550 --> 00:04:42,980
ekranie, a my mamy te same zakładki, co wcześniej w

58
00:04:42,980 --> 00:04:43,550
iOS,

59
00:04:43,550 --> 00:04:45,140
które się nie zmieniły,

60
00:04:45,140 --> 00:04:48,440
ale w Androidzie mamy teraz nawigator kart z bardziej

61
00:04:48,500 --> 00:04:53,200
materiałowym wyglądem, w którym możemy teraz również zmieniaj w ten sposób i to

62
00:04:53,240 --> 00:04:59,270
ten efekt przesunięcia, który tutaj widzisz, że karty rosną, że etykieta istnieje tylko na karcie, która jest

63
00:04:59,270 --> 00:05:00,740
aktywna, a jeśli przy

64
00:05:00,860 --> 00:05:05,990
okazji ustawisz tutaj przesunięcie na false, po prostu nie masz tego efekt, wtedy zawsze masz

65
00:05:05,990 --> 00:05:08,390
tam również swoje etykiety na Androidzie.

66
00:05:08,390 --> 00:05:12,490
To jest teraz wygląd, który wygląda trochę bardziej

67
00:05:12,650 --> 00:05:19,990
jak Android, powiedziałbym, dlatego jest to wygląd, który chcę tu mieć i możesz pójść o krok dalej.

68
00:05:20,070 --> 00:05:23,690
Powiedzmy, że chcemy tutaj zmienić cały kolor tła paska

69
00:05:23,830 --> 00:05:25,150
kart w

70
00:05:25,320 --> 00:05:30,800
zależności od wybranej karty i mieć ładny efekt falowania, który zmienia to po drodze.

71
00:05:31,110 --> 00:05:36,360
W tym celu możemy przejść do naszej konfiguracji ekranu i tam do opcji nawigacji i tam

72
00:05:36,360 --> 00:05:37,780
mamy ikonę paska kart.

73
00:05:37,800 --> 00:05:42,760
Możemy również ustawić tutaj kolor paska kart, gdy ta karta jest zaznaczona,

74
00:05:42,810 --> 00:05:51,160
aby na przykład ustawić kolor podstawowy na kolory, a teraz ważne, ma to wpływ tylko wtedy, gdy ustawisz przesunięcie na

75
00:05:51,200 --> 00:05:58,850
true, w przeciwnym razie prop kolor paska paska które tutaj konfiguruję, nie przyniesie żadnego efektu, ponieważ obsługuje to tylko

76
00:05:58,850 --> 00:06:05,390
efekt przesunięcia, a teraz będziemy mieć ten efekt, że jeśli to zapiszę, uzyskaj taki sam wygląd

77
00:06:06,640 --> 00:06:12,810
w systemie iOS, ponieważ jest tam pasek kart kolor nie ma wpływu, ale teraz widzisz,

78
00:06:13,030 --> 00:06:17,770
naprawdę mamy nasz podstawowy kolor jako tło, jeśli posiłki są wybrane,

79
00:06:17,770 --> 00:06:21,980
jeśli wybieramy ulubione, które zmieniają się na inny kolor.

80
00:06:22,030 --> 00:06:27,940
Teraz ta zmiana oczywiście nie wygląda tak pięknie, dlatego możemy ją po prostu zmienić, nadając

81
00:06:27,940 --> 00:06:30,950
naszym ulubionym ekranom własny kolor paska kart.

82
00:06:30,970 --> 00:06:36,430
Można więc powiedzieć, że w opcjach nawigacji ekranu ulubionych obok ikony paska kart ustawiliśmy

83
00:06:36,900 --> 00:06:44,340
tam kolor paska kart na kolor akcentujący, a teraz będziemy mieli inny pasek kart, który zmienia kolor z głównego

84
00:06:44,340 --> 00:06:51,250
na posiłki tutaj ten akcentujący kolor dla ulubionych z tym ładnym efektem marszczenia i oczywiście wadą jest

85
00:06:51,250 --> 00:06:56,910
to, że nie widzimy ikony, ponieważ kolor akcentujący kolor paska kart nie jest dobrym

86
00:06:56,910 --> 00:06:57,740
wyborem,

87
00:06:57,750 --> 00:07:01,020
jeśli nasz kolor odcienia jest również kolorem akcentującym.

88
00:07:01,020 --> 00:07:06,270
Więc jeśli użyjemy tego efektu, możemy chcieć użyć tutaj bieli jako koloru odcienia, który zawsze możemy

89
00:07:06,270 --> 00:07:13,020
zobaczyć zarówno w stosunku do koloru podstawowego, jak i akcentu, a zatem w przypadku aktywnego koloru odcienia, możemy chcieć użyć bieli

90
00:07:13,020 --> 00:07:18,750
zamiast naszego akcentu kolor, ponieważ biały będzie działał na obu kartach, bez względu na to, czy pasek kart

91
00:07:18,750 --> 00:07:24,540
zostanie następnie zabarwiony na kolor podstawowy, ten ciemnofioletowy czy akcentowany kolor, ten pomarańczowy, a zatem teraz widzimy, że

92
00:07:24,540 --> 00:07:26,640
mamy tutaj ten efekt i tę

93
00:07:26,640 --> 00:07:32,610
ładną falę zmieniamy na druga zakładka tutaj dla ulubionych. I myślę, że jest to całkiem słodka i łatwa

94
00:07:32,730 --> 00:07:39,120
do wdrożenia zmiana, która sprawia, że ten wygląd świetnie wygląda na Androidzie i z pewnością daje nam bardziej

95
00:07:39,240 --> 00:07:45,660
charakterystyczny wygląd podobny do Androida, zachowując domyślny wygląd iOS, którego można oczekiwać na tej platformie, jest naprawdę łatwy

96
00:07:45,660 --> 00:07:47,730
do wdrożenia, ponieważ móc powiedzieć.

97
00:07:47,820 --> 00:07:52,700
A teraz krótka uwaga: jeśli nie chcesz użyć tego efektu przesunięcia, którego

98
00:07:52,710 --> 00:07:58,020
chcę tutaj użyć, ale jeśli nie chcesz go użyć, to oczywiście możesz zauważyć, że

99
00:07:58,020 --> 00:08:06,350
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.

100
00:08:06,360 --> 00:08:09,060
Teraz zazwyczaj możesz też to zmienić i jak

101
00:08:09,060 --> 00:08:12,060
widać, kolor paska kart po prostu nie ma wpływu,

102
00:08:12,060 --> 00:08:14,080
działa to tylko z przesunięciem.

103
00:08:14,310 --> 00:08:21,330
Teraz, jeśli chcesz zmienić kolor tła dla całego paska kart w etui bez przesunięcia, wszystko, co

104
00:08:21,330 --> 00:08:29,570
musisz zrobić, to skonfigurować konfigurację samego nawigatora kart, ponieważ wpływa on teraz na cały pasek kart, możesz skonfigurować właściwość

105
00:08:29,570 --> 00:08:30,410
stylu

106
00:08:30,410 --> 00:08:36,980
paska i to po prostu obiekt stylu, w którym można na przykład ustawić kolor

107
00:08:36,980 --> 00:08:43,240
tła na podstawowe kolory, tak jak to, a to po prostu zmienia kolor tła

108
00:08:43,240 --> 00:08:47,180
paska nawigacji dla naszego dolnego paska Androida tutaj.

109
00:08:47,180 --> 00:08:52,750
Więc w ten sposób możesz to zmienić, jeśli nie chcesz tutaj używać wzoru przesunięcia,

110
00:08:52,790 --> 00:08:53,860
wyglądu przesunięcia.

111
00:08:54,080 --> 00:08:56,000
Włączę ponownie zmianę, ponownie ustawimy

112
00:08:56,010 --> 00:09:01,370
to na prawdę, ponieważ naprawdę podoba mi się ten kolorowy pasek kart, myślę, że

113
00:09:01,370 --> 00:09:07,100
to naprawdę ładny wygląd z efektem falowania, który zmienia kolor i tak łatwo jest zaimplementować

114
00:09:07,130 --> 00:09:08,660
różne paski kart.

115
00:09:08,660 --> 00:09:13,820
Ponownie, istnieje wiele opcji konfiguracji zarówno dla samego paska kart, jak i opcji nawigacji ekranów, które

116
00:09:13,820 --> 00:09:18,590
masz wewnątrz paska kart, a zatem znajdziesz oficjalne dokumenty dołączone, w których możesz zagłębić

117
00:09:18,590 --> 00:09:22,490
się w każdą opcję i eksplorować i baw się z nimi.