1
00:00:02,270 --> 00:00:05,450
Jak więc tutaj przypisać ikony?

2
00:00:05,450 --> 00:00:09,580
Jak możemy zatem upewnić się, że używamy koloru, którego

3
00:00:09,590 --> 00:00:10,990
chcemy użyć?

4
00:00:11,090 --> 00:00:12,760
Zacznijmy od

5
00:00:12,760 --> 00:00:17,920
koloru, zanim dodamy ikony. Podobnie jak w przypadku funkcji tworzenia

6
00:00:18,020 --> 00:00:20,290
stosu nawigatora stosu, tworzenie dolnej

7
00:00:20,290 --> 00:00:25,250
karty nawigatora również wymaga drugiego argumentu. Pierwszy argument to twój obiekt konfiguracyjny, w

8
00:00:25,280 --> 00:00:27,370
którym konfigurujesz różne zakładki i

9
00:00:27,410 --> 00:00:33,600
ekrany, na które wskazują, drugi argument to także obiekt, w którym możesz ogólnie skonfigurować nawigatora i

10
00:00:33,610 --> 00:00:35,290
tam masz kilka ustawień.

11
00:00:35,330 --> 00:00:40,120
Ponownie, oficjalne dokumenty są miejscem, gdzie można dowiedzieć się o

12
00:00:40,310 --> 00:00:45,340
każdym ustawieniu tutaj, jednym z ważniejszych ustawień tutaj są opcje paska kart.

13
00:00:45,380 --> 00:00:52,970
To kolejny obiekt, w którym możesz szczegółowo kontrolować wygląd paska kart, jego styl.

14
00:00:53,090 --> 00:00:59,180
Możesz ustawić nieaktywny kolor odcienia, który jest kolorem, który ma obecnie karta, która jest nieaktywna.

15
00:00:59,180 --> 00:01:03,160
Możesz ustawić aktywny kolor odcienia i właśnie tego tutaj

16
00:01:03,170 --> 00:01:08,600
potrzebujemy, możesz również ustawić aktywny kolor tła i nieaktywny kolor tła, aby oczywiście

17
00:01:08,600 --> 00:01:11,720
również zmienić tło zakładek, jeśli chcesz, a

18
00:01:11,930 --> 00:01:16,540
zatem masz wiele możliwości, aby naprawdę dostosować to do swoich wymagań.

19
00:01:16,660 --> 00:01:20,000
I tutaj ustawię aktywny kolor odcienia, ponieważ to wszystko,

20
00:01:20,000 --> 00:01:25,910
czego tu potrzebuję, ale oczywiście nie wahaj się z tym bawić i zmienić kolory tła,

21
00:01:25,910 --> 00:01:32,330
a także zmienić inne ustawienia i ustawię mój aktywny kolor odcienia na wartość moje stałe kolory, które

22
00:01:32,330 --> 00:01:35,390
tu importuję, ustawię na kolory akcentujące kolor.

23
00:01:35,410 --> 00:01:37,300
Nie używałeś go wcześniej, ale teraz

24
00:01:37,370 --> 00:01:42,290
go użyję i to jest ten pomarańczowy kolor, który teraz mamy i dlatego łatwo

25
00:01:42,290 --> 00:01:45,900
zmieniamy kolor aktywnej zakładki. Teraz to jedno, pamiętaj

26
00:01:46,110 --> 00:01:50,280
też, że to oczywiście nie dodaje ikony, a jak by to

27
00:01:50,280 --> 00:01:51,020
było,

28
00:01:51,030 --> 00:01:57,300
nie mówimy nic o ikonie, którą chcemy dodać. Teraz, aby dodać ikonę, prosty wzór

29
00:01:57,480 --> 00:02:01,860
myślę, że przechodzisz tutaj do konfiguracji trasy, więc do

30
00:02:01,860 --> 00:02:07,710
konfiguracji, w której mapujesz ekrany na zakładki i używasz dłuższej formy, w

31
00:02:07,710 --> 00:02:12,000
której dodajesz właściwość screen, a następnie dodajesz opcje nawigacji.

32
00:02:12,000 --> 00:02:17,370
Nawiasem mówiąc, możesz to również zrobić bezpośrednio w komponencie, oczywiście dodając opcje

33
00:02:17,400 --> 00:02:19,700
nawigacji, tak jak zrobiliśmy to

34
00:02:19,710 --> 00:02:25,080
wcześniej, jednak ponieważ posiłki tutaj są w rzeczywistości nawigatorem, jedynym miejscem

35
00:02:25,110 --> 00:02:26,560
dodawania opcji

36
00:02:26,700 --> 00:02:31,330
nawigacji jest oczywiście tutaj lub też tutaj, utwórz nawigator stosu.

37
00:02:31,560 --> 00:02:37,290
Tam możesz również ustawić klucz opcji nawigacji tutaj na drugim argumencie, na tym

38
00:02:37,320 --> 00:02:42,390
obiekcie podajesz jako drugi argument, aby utworzyć nawigator stosu, w którym konfigurujesz

39
00:02:42,390 --> 00:02:48,180
ogólny nawigator, aby dać temu samemu nawigatorowi pewne opcje nawigacji, ponieważ opcje nawigacji,

40
00:02:48,180 --> 00:02:54,060
które przypisujemy nawigator posiłków, więc do nawigatora stosu są teraz opcje, które są uwzględniane

41
00:02:54,270 --> 00:03:00,810
przez nawigator kart, który używa tego nawigatora posiłków jako nawigatora zagnieżdżonego, a opcje nawigacyjne, które możemy

42
00:03:01,140 --> 00:03:10,680
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,

43
00:03:10,770 --> 00:03:18,900
którą wskazujesz, ale zamiast tego jest to funkcja. Jest to funkcja, która odbiera informacje o kartach, które

44
00:03:18,990 --> 00:03:23,300
możesz powiedzieć, powinna przejść tutaj, oto argument, który otrzymujemy automatycznie, ponieważ

45
00:03:23,330 --> 00:03:28,490
ta funkcja zostanie oczywiście wywołana przez nawigację React i ikona paska kart, ta

46
00:03:28,970 --> 00:03:34,340
funkcja tutaj, musi zwrócić ikonę, którą chcesz renderować dla tej karty, w tym przypadku

47
00:03:34,340 --> 00:03:35,720
dla karty posiłków.

48
00:03:39,680 --> 00:03:46,360
Oznacza to, że muszę mieć możliwość korzystania z ikon tutaj i do tego możemy importować jony lub dowolny

49
00:03:46,370 --> 00:03:50,680
inny zestaw ikon, którego chcesz używać z @ expo / vector-icons.

50
00:03:50,680 --> 00:03:52,440
Ponownie, nie krępuj się zainstalować

51
00:03:52,450 --> 00:03:57,400
ten pakiet, zwykle powinien on zostać zainstalowany automatycznie podczas pracy z Expo, ale możesz po

52
00:03:57,400 --> 00:04:03,040
prostu uruchomić npm install --save @ expo / vector-icons, aby mieć pewność, że masz zainstalowany i możesz użyć

53
00:04:03,100 --> 00:04:07,980
dowolnego zestawu ikon chcesz, ale zawsze używam jonów przez cały kurs, będę się ich trzymać.

54
00:04:08,230 --> 00:04:12,340
Dzięki temu możesz używać jonów jako składnika, jak nauczyłeś się wcześniej w trakcie kursu.

55
00:04:12,340 --> 00:04:18,580
Więc tutaj możemy po prostu zwrócić takie jony do renderowania ikony jonowej, a teraz

56
00:04:18,580 --> 00:04:20,090
możesz użyć dowolnej

57
00:04:20,170 --> 00:04:24,090
nazwy ikony tutaj i tutaj Chcę użyć ios-restaurant, która

58
00:04:24,100 --> 00:04:29,090
jest po prostu ikoną, którą znalazłem na liście ikon, ta lista

59
00:04:29,320 --> 00:04:32,750
tutaj który pokazałem również wcześniej, oto ta

60
00:04:32,870 --> 00:04:37,320
ikona ios-restaurant, którą wybrałem, której teraz używam, którą tu wskazuję.

61
00:04:37,450 --> 00:04:40,120
To jest ikona, którą chcę

62
00:04:40,120 --> 00:04:42,610
wyrenderować, dam jej rozmiar 25,

63
00:04:42,610 --> 00:04:43,990
możesz z

64
00:04:43,990 --> 00:04:46,890
nią eksperymentować, ale znalazłem 25, aby

65
00:04:46,900 --> 00:04:50,200
wyglądać całkiem przyzwoicie na pasku kart i

66
00:04:50,350 --> 00:04:57,610
kolorze, a to jest teraz ważne dla tabInfo. tintColor, ponieważ kolor, który tu ustawiliśmy, powinien oczywiście być naszym kolorem odcienia,

67
00:04:57,610 --> 00:04:58,810
który tu ustawiliśmy.

68
00:04:58,810 --> 00:05:01,980
Teraz oczywiście możemy na stałe zakodować to, aby pokolorować tutaj kolor

69
00:05:01,990 --> 00:05:06,030
akcentujący, ale jeśli zmienimy go tam na dole, musimy pamiętać, że również tam go zmienimy.

70
00:05:06,040 --> 00:05:11,440
Dobrą rzeczą jest to, dlatego właśnie ta funkcja powoduje, że nawigacja React wywołuje dla nas

71
00:05:11,440 --> 00:05:17,830
tę funkcję i dostarcza nam istotnych informacji na temat tego, jak nasz pasek kart jest skonfigurowany w tym obiekcie

72
00:05:17,830 --> 00:05:23,350
informacyjnym karty, i że na przykład zawiera ustawiony przez nas kolor odcienia , dzięki czemu możemy

73
00:05:23,350 --> 00:05:29,440
dynamicznie pobrać to tutaj, aby pokolorować ikonę, tak że jeśli zmienimy tam kolor paska kart, zostanie on automatycznie

74
00:05:29,470 --> 00:05:30,910
odzwierciedlony w naszych

75
00:05:30,940 --> 00:05:35,810
ikonach na górze, więc mamy tutaj trochę wygody, z której możemy skorzystać tutaj .

76
00:05:35,810 --> 00:05:42,740
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,

77
00:05:42,770 --> 00:05:48,200
a następnie dodać tutaj opcje nawigacji, które zostaną połączone z dowolną nawigacją opcje, które ustawiliśmy na

78
00:05:52,430 --> 00:05:57,400
ekranie ulubionych ale pamiętaj, że oczywiście możesz absolutnie również ustawić opcje nawigacji tutaj w

79
00:05:57,400 --> 00:06:00,920
komponencie ekranu ulubionych, dlatego aby zachować to wszystko w jednym

80
00:06:00,980 --> 00:06:03,620
miejscu, zrobię to w ustawionej tu nawigacji.

81
00:06:03,620 --> 00:06:06,150
To są moje opcje nawigacji

82
00:06:06,170 --> 00:06:11,420
dla tego ekranu, podobnie jak dla tego nawigatora, nawigatora posiłków, możemy oczywiście skonfigurować

83
00:06:11,480 --> 00:06:14,280
opcje nawigacji dla ekranu, to właśnie zrobiliśmy

84
00:06:14,330 --> 00:06:19,880
w całym module, i tam, chcę zrobić zasadniczo to samo, więc po prostu skopiuję

85
00:06:19,940 --> 00:06:25,790
to, dodam tutaj do tego obiektu opcji nawigacji, a jedyną rzeczą, która różni się tutaj,

86
00:06:25,790 --> 00:06:30,130
jest ikona, której chcę użyć, tutaj jest to ios-star zamiast ios-restaurant.

87
00:06:30,290 --> 00:06:36,170
I dzięki temu, jeśli to zapiszemy, faktycznie pojawia się błąd, ponieważ ponieważ teraz

88
00:06:36,170 --> 00:06:42,230
używam tutaj jsx, musimy zaimportować React, oczywiście tak działa React, ponieważ jsx za kulisami

89
00:06:42,260 --> 00:06:48,510
jest przekształcany w React tworzenie elementu, jak wiesz, a zatem teraz po dodaniu importu

90
00:06:48,530 --> 00:06:54,680
React tutaj w MealsNavigator. plik js. To działa, a teraz mamy ikony,

91
00:06:54,680 --> 00:06:58,180
które automatycznie przyjmują nasz kolor odcienia i tak łatwo można dodawać ikony.

92
00:06:58,270 --> 00:07:03,740
Teraz oprócz ustawienia ikony możesz również ustawić etykietę, a zobaczysz, że domyślnie

93
00:07:03,860 --> 00:07:10,580
etykieta, posiłki i ulubione to po prostu identyfikator, który przypisaliśmy tutaj podczas konfigurowania naszych posiłków

94
00:07:10,610 --> 00:07:12,050
nawigacyjnych i ulubionych.

95
00:07:12,050 --> 00:07:17,540
Często ma to sens, ale jeśli chcesz mieć inną etykietę, to w opcjach

96
00:07:17,630 --> 00:07:20,780
nawigacji ekranu ładowanych tutaj na tej karcie

97
00:07:20,780 --> 00:07:28,910
możesz ustawić właściwość etykiety paska kart, a tam jest to tylko ciąg gdzie możesz mieć ulubione ze znakiem wykrzyknika,

98
00:07:28,910 --> 00:07:34,310
a jeśli to ustawisz, zobaczysz, że teraz masz ulubione ze znakiem wykrzyknika

99
00:07:34,310 --> 00:07:37,040
zamiast tylko ulubionych jak poprzednio.

100
00:07:37,040 --> 00:07:42,500
Możesz więc zastąpić tę domyślną etykietę, która zakłada się, że zwykle jest to twój identyfikator, jeśli

101
00:07:42,500 --> 00:07:47,510
chcesz inną, możesz ją zastąpić i oczywiście jest więcej opcji, które możesz ustawić i

102
00:07:47,510 --> 00:07:52,700
dołączyć, znajdziesz link do oficjalnych dokumentów dla ten nawigator, w którym można dowiedzieć się wszystkiego

103
00:07:52,700 --> 00:08:00,740
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

104
00:08:00,740 --> 00:08:04,850
nawigatorach wewnątrz tego nawigatora po kartach, a więc o tym, co

105
00:08:04,850 --> 00:08:05,870
tutaj konfigurujemy.