1
00:00:02,190 --> 00:00:05,630
Pracujmy na ekranie zamówień, zanim dodamy nawigację, nie musimy jej

2
00:00:05,670 --> 00:00:07,920
kończyć, ale chcę ją zobaczyć.

3
00:00:08,700 --> 00:00:15,300
Tam importuję React z React, aby móc zbudować prawidłowy komponent React, jak zawsze importować coś z

4
00:00:15,300 --> 00:00:20,060
React Native i że do tego też jesteśmy przyzwyczajeni, prawda?

5
00:00:20,060 --> 00:00:21,810
To nigdy nie jest takie zaskakujące.

6
00:00:21,840 --> 00:00:23,050
Będziemy

7
00:00:23,370 --> 00:00:32,880
potrzebować widoku, prawdopodobnie będziemy potrzebować płaskiej listy, ponieważ potencjalnie będziemy mieli wiele zamówień, nieskończoną kwotę

8
00:00:32,880 --> 00:00:43,670
i chcę móc to renderować, a dzięki temu tutaj możemy zbudować ekran naszych zamówień w ten sposób.

9
00:00:43,790 --> 00:00:53,710
Wyeksportuję to oczywiście, a stylizacja nie powinna być tutaj wymagana, właściwie nie powinniśmy nawet potrzebować widoku, ponieważ

10
00:00:53,770 --> 00:01:01,570
chcę tylko wypisać moją listę zamówień. Więc oczywiście potrzebne nam dane będą pochodzić z

11
00:01:01,720 --> 00:01:04,350
Redux, więc powinniśmy zaimportować

12
00:01:04,360 --> 00:01:10,600
selektor użycia z React Redux, który pozwala nam wejść do sklepu Redux.

13
00:01:11,350 --> 00:01:19,330
Więc tutaj możemy uzyskać nasze zamówienia za pomocą selektora użycia i selektora użycia wskazuje teraz na stan. rozkazy i oczywiście jest to identyfikator, który tutaj

14
00:01:19,390 --> 00:01:25,740
przypisałem tutaj w połączonych zleceniach reduktorów, to daje nam dostęp do segmentu stanu

15
00:01:25,810 --> 00:01:29,680
zarządzanego przez reduktor zamówień i tam

16
00:01:29,680 --> 00:01:34,040
mamy kolejną właściwość zamówień, która przechowuje rzeczywistą tablicę zamówień.

17
00:01:34,060 --> 00:01:37,860
Więc tutaj muszę uzyskać dostęp do stanu. Zamówienia. zamówienia w końcu,

18
00:01:37,870 --> 00:01:41,070
to daje mi moje zamówienia, które są przechowywane w Redux.

19
00:01:41,110 --> 00:01:48,640
Teraz musimy tylko zwrócić naszą płaską listę, a to otrzyma zamówienia, które powinny

20
00:01:48,640 --> 00:01:56,640
być tablicą, a które są danymi. Od teraz kluczowy ekstraktor nie jest wymagany w nowszych wersjach React

21
00:01:56,640 --> 00:02:01,520
Native, ponieważ każde zamówienie, jeśli spojrzysz na model ma identyfikator, a nowsze wersje React

22
00:02:02,010 --> 00:02:09,780
powinny go szukać, ale dla bezpieczeństwa, dodam go tutaj i wyrenderuję item teraz oczywiście powinien posiadać funkcję, która odbiera dane pozycji i

23
00:02:09,780 --> 00:02:16,440
która ostatecznie zwraca wszystko, co chcemy renderować dla zamówienia. Teraz element zamówienia będzie w przyszłości bardziej złożony, na

24
00:02:16,440 --> 00:02:17,010
razie

25
00:02:17,010 --> 00:02:21,990
po prostu wyślę trochę tekstu, abyśmy szybko mieli coś na ekranie, co możemy

26
00:02:21,990 --> 00:02:23,670
zobaczyć, zanim to poprawimy.

27
00:02:24,000 --> 00:02:27,650
Tutaj może być tekst dla danego elementu, a teraz

28
00:02:27,660 --> 00:02:32,990
spójrzmy na kolejność, tam mamy identyfikator, mamy elementy, które są kolejną listą,

29
00:02:33,000 --> 00:02:40,150
więc najłatwiejszym wyjściem jest po prostu kwota. Więc tutaj przedstawię tylko całkowitą kwotę właściwości,

30
00:02:41,050 --> 00:02:44,380
którą ma tutaj moje zamówienie.

31
00:02:44,430 --> 00:02:46,050
To właśnie wypisuję

32
00:02:46,050 --> 00:02:48,360
na płaskiej liście, teraz mamy podstawowy

33
00:02:48,360 --> 00:02:55,550
ekran zamówień, oczywiście musimy teraz być w stanie to osiągnąć. Przejdźmy więc do nawigatora sklepu i zaimportuj tutaj

34
00:02:55,610 --> 00:03:04,740
ekran zamówień, ekran zamówień z folderu ekranów, z ekranu zamówień sklepowych, a teraz ważne jest to, że nie chcę dodawać

35
00:03:05,180 --> 00:03:11,630
go do tego nawigatora stosów, ponieważ nie jest to częścią tego stos, zamiast tego

36
00:03:11,630 --> 00:03:12,590
chcę

37
00:03:12,590 --> 00:03:16,490
dotrzeć do niego z menu, z menu bocznym.

38
00:03:16,730 --> 00:03:19,840
Musimy więc zbudować nawigator szuflad.

39
00:03:19,910 --> 00:03:24,430
Oczywiście możesz również pracować z kartami, jeśli wolisz, ale chcę tutaj pracować z

40
00:03:24,500 --> 00:03:26,720
szufladą, więc potrzebujemy tego nawigatora szuflad.

41
00:03:26,750 --> 00:03:31,760
Teraz ekran zamówień, choć będzie to jedyny przedmiot, powinien znajdować się na swoim

42
00:03:31,850 --> 00:03:34,490
stosie, abyśmy mieli tam również nagłówek.

43
00:03:34,490 --> 00:03:45,550
Dlatego utworzę tutaj nowy nawigator zamówień, w którym utworzę kolejny nawigator stosów i tam, jedyne potrzebne mapowanie to zamówienia, które wskazują na ekranie

44
00:03:45,550 --> 00:03:53,740
zamówień, drugi argument tutaj powinien nadal ustawić domyślne opcje nawigacji i użyję te same opcje, co tutaj,

45
00:03:53,740 --> 00:03:57,640
dlatego właściwie wezmę ten obiekt, wytnę go

46
00:03:57,970 --> 00:04:04,660
stąd i zapiszę w osobnej stałej, domyślnej opcji nawigacji, takiej jak ta, jest to

47
00:04:04,700 --> 00:04:07,170
wzorzec, którego już użyłem

48
00:04:08,550 --> 00:04:13,590
w module nawigacyjnym, ponieważ teraz możemy użyć tej stałej tutaj

49
00:04:13,590 --> 00:04:19,830
w nawigatorze produktów do domyślnych opcji nawigacji, a także tutaj w nawigatorze zamówień.

50
00:04:19,830 --> 00:04:26,760
Teraz oczywiście celem jest stworzenie nawigatora szufladowego, który ogólnie nazywam nawigatorem sklepu, ponieważ łączy on

51
00:04:26,760 --> 00:04:29,160
różne funkcje sklepu, które

52
00:04:29,160 --> 00:04:36,260
można powiedzieć za pomocą narzędzia do tworzenia szuflad. Tam chcę teraz połączyć

53
00:04:36,270 --> 00:04:40,410
te dwa stosy, nawigator produktów i nawigator

54
00:04:40,410 --> 00:04:48,300
zamówień, więc potrzebujemy produktów z nawigatorem produktów i zamówień wskazujących na nawigator zamówień,

55
00:04:48,330 --> 00:04:56,160
a więc na tych nawigatorach stosów. Chcę również skonfigurować moje opcje zawartości tam na

56
00:04:56,160 --> 00:05:02,280
szufladzie, to pozwala mi na przykład ustawić kolor odcienia elementów, gdy są one

57
00:05:02,280 --> 00:05:11,680
wybrane, i tam chcę ustawić aktywny kolor odcienia na Kolory. podstawowe, aby były kolorowe kolorem podstawowym, jeśli zostały wybrane.

58
00:05:11,710 --> 00:05:17,710
Teraz należy zwrócić nawigator sklepu. Samo to nie załatwi sprawy, ale to pierwszy

59
00:05:17,710 --> 00:05:18,680
krok, teraz

60
00:05:18,730 --> 00:05:25,870
zanim dodamy przycisk menu, przejdźmy do ekranu zamówień i tam faktycznie dodamy tytuł, więc dodam tam opcje nawigacji, ustawię to

61
00:05:25,900 --> 00:05:28,630
na obiekt, w tej chwili nie potrzebujemy

62
00:05:28,630 --> 00:05:29,940
tutaj opcji dynamicznych, ponieważ

63
00:05:29,950 --> 00:05:35,680
chcę tylko ustawić tytuł nagłówka do twoich zamówień, a teraz, gdy o tym myślę, powinniśmy również

64
00:05:35,680 --> 00:05:36,290
dodać

65
00:05:37,060 --> 00:05:38,620
to na ekranie koszyka,

66
00:05:38,710 --> 00:05:42,670
gdzie jeszcze tego nie robię. Tam też chcę

67
00:05:42,670 --> 00:05:48,520
ustawić to na ekranie koszyka, ustawić to na swoim koszyku.

68
00:05:48,520 --> 00:05:51,200
Tak jest teraz w opcjach nawigacji na

69
00:05:51,220 --> 00:05:57,270
ekranie koszyka, na ekranie zamówień lub ten nawigator jest skonfigurowany. Po tym wszystkim musimy dodać ten przycisk

70
00:05:57,280 --> 00:06:04,000
menu, tę ikonę hamburgera, na przykład na ekranie przeglądu produktów, gdzie chcę móc otworzyć szufladę

71
00:06:04,000 --> 00:06:09,220
i przejść do moich zamówień. Teraz, aby go dodać, przejdźmy do

72
00:06:09,220 --> 00:06:13,780
opcji nawigacji na ekranie przeglądu produktu, który jest już dynamiczny,

73
00:06:13,780 --> 00:06:14,550
co

74
00:06:14,860 --> 00:06:21,070
jest dobre, a następnie oprócz dodania nagłówka bezpośrednio dla tej ikony koszyka, dodajmy

75
00:06:21,070 --> 00:06:29,100
nagłówek Left i nagłówek Left powinny oczywiście zawierać przyciski nagłówka, ale tam , to będą moje elementy menu,

76
00:06:29,220 --> 00:06:37,170
więc nazwałbym to tak i tam, chcę użyć menu md lub menu iOS w zależności od platformy,

77
00:06:37,170 --> 00:06:38,910
na której działamy i

78
00:06:38,920 --> 00:06:46,150
chcę nawigować oczywiście nigdzie, zamiast nawigacji prop tutaj, aby powiedzieć, chcę wywołać szufladę przełączającą, która otworzy

79
00:06:46,160 --> 00:06:48,950
boczną szufladę. Nawiasem mówiąc, ta

80
00:06:48,950 --> 00:06:54,920
sama konfiguracja jest również wymagana na ekranie zamówień, abyśmy mogli opuścić ten ekran.

81
00:06:55,700 --> 00:07:01,820
Tak więc tutaj potrzebujemy tej dynamicznej konfiguracji opcji nawigacji, w której mamy tutaj

82
00:07:01,820 --> 00:07:09,020
funkcję, w której zwracamy nasz obiekt config, abyśmy mogli tam dodać także headerLeft za pomocą

83
00:07:09,020 --> 00:07:15,170
przycisków nagłówka, z naszym menu przełączającym szufladę który opiera się na danych nawigacyjnych

84
00:07:15,170 --> 00:07:22,910
tutaj i oczywiście w tym celu musimy zaimportować przyciski nagłówka, przycisk nagłówka i element, więc na końcu

85
00:07:22,910 --> 00:07:25,700
ekranu przeglądu produktu muszę zaimportować

86
00:07:25,700 --> 00:07:30,860
te rzeczy tutaj, należy dodać te dwie linie do ekranu zamówień.

87
00:07:30,860 --> 00:07:32,700
Więc pozwól, że

88
00:07:32,840 --> 00:07:39,020
go dodam, dodając przyciski nagłówka i import elementu z React nawigacyjnych przycisków nagłówka oraz

89
00:07:39,020 --> 00:07:45,300
import przycisku nagłówka z naszego niestandardowego komponentu. Teraz, jeśli to zapiszemy, powinniśmy mieć tutaj przycisk

90
00:07:45,300 --> 00:07:52,410
menu i tak się dzieje, otwiera szufladę, możemy przejść do zamówień i pojawia się tutaj błąd, ponieważ na

91
00:07:52,890 --> 00:07:55,560
ekranie zamówienia oczywiście używam platformy

92
00:07:55,560 --> 00:07:58,400
Interfejs API, więc powinniśmy go tam zaimportować,

93
00:07:58,400 --> 00:08:08,170
zróbmy to, dodajmy platformę, a teraz, jeśli wrócimy, możemy przejść do zamówień i tam też możemy wrócić i tak samo jest w przypadku Androida.

94
00:08:10,060 --> 00:08:12,160
Teraz dodaliśmy szufladę.

95
00:08:12,160 --> 00:08:15,400
Jest jedna rzecz, którą chcę dodać do

96
00:08:15,400 --> 00:08:21,940
szuflady, ale której wcześniej nie robiłem przed kontynuowaniem pracy z listą zamówień, jeszcze nic nie wysyłamy,

97
00:08:22,240 --> 00:08:28,570
ponieważ tak naprawdę nie dodajemy zamówień, nie podłączyliśmy tego przycisk Zamów teraz, nie widzimy jednak

98
00:08:28,570 --> 00:08:33,180
żadnych zmian, jeśli dodamy coś do koszyka, kliknij raz zamówienie teraz,

99
00:08:33,280 --> 00:08:37,810
kliknięcie tego wielokrotnie spowoduje błąd w tej chwili, a następnie zobaczymy

100
00:08:37,860 --> 00:08:41,140
to zamówienie tutaj. Teraz musimy wyczyścić koszyk,

101
00:08:41,140 --> 00:08:45,940
to kolejna rzecz, którą musimy zrobić, ale zanim to zrobimy, w szufladzie faktycznie chcę też

102
00:08:46,030 --> 00:08:51,340
mieć ikony obok moich wpisów, a dodanie tych ikon jest w rzeczywistości bardzo proste, prawda '

103
00:08:51,340 --> 00:08:57,640
Zrobiłem to w module nawigacyjnym, ale zrobimy to teraz. Aby dodać ikony, wystarczy przejść do ekranów, do których

104
00:08:57,640 --> 00:08:59,920
nawigujesz w szufladzie, aw naszym przypadku

105
00:08:59,920 --> 00:09:04,990
są to oczywiście te dwa nawigatory, więc nie są to ekrany, ale te dwa nawigatory

106
00:09:05,440 --> 00:09:11,200
i na tych nawigatorach lub jeśli były to ekrany , na tych ekranach możesz ustawić opcje nawigacji,

107
00:09:11,200 --> 00:09:17,230
a tym samym nie mam na myśli domyślnych opcji nawigacji, które ustawiasz dla wszystkich ekranów tego nawigatora, ale

108
00:09:17,230 --> 00:09:23,080
ustawiasz dla tego nawigatora, jeśli jest on używany w innym nawigatorze, jak ma to miejsce w tym przypadku.

109
00:09:23,080 --> 00:09:25,020
Możemy więc dodać

110
00:09:25,030 --> 00:09:29,320
tutaj opcje nawigacji, ponownie nie zostanie to zastosowane do

111
00:09:29,320 --> 00:09:32,550
ekranów tego nawigatora, ale zamiast tego skonfiguruje

112
00:09:32,740 --> 00:09:39,700
tego nawigatora, jeśli jest to ekran innego nawigatora, a tutaj nawigator zamówień jest ekranem nawigatora

113
00:09:39,700 --> 00:09:50,140
sklepu w końcu i tam w tych opcjach nawigacji możemy dodać pozycję ikony szuflady, która może być funkcją, powiedzmy, konfigurację szuflady, ta funkcja

114
00:09:51,150 --> 00:09:56,890
jest wywoływana przez nawigację React i daje tę konfigurację szuflady, co najważniejsze,

115
00:09:56,890 --> 00:10:03,870
na przykład, mówi ci jaki jest twój kolor odcienia, ponieważ tutaj możesz teraz zwrócić komponent,

116
00:10:03,880 --> 00:10:10,630
taki jak komponent Ionicons, aby renderować ikonę. W tym celu musisz tylko upewnić się, że

117
00:10:11,200 --> 00:10:12,780
importujesz jony z @

118
00:10:12,790 --> 00:10:16,650
expo / vector-icons, więc musisz dodać ten import do

119
00:10:16,780 --> 00:10:23,770
pliku nawigatora sklepu, a teraz z tym dodanym, jeśli przejdziemy tutaj, zwracam mój Ionicon, teraz mogę go

120
00:10:23,770 --> 00:10:24,640
skonfigurować

121
00:10:24,850 --> 00:10:30,720
tak, jak zawsze to robiłem, i do tego ponownie możemy użyć interfejsu API platformy,

122
00:10:30,730 --> 00:10:39,340
który już tutaj importujemy, jeśli nie, upewnij się, że to zrobisz. Możemy to wykorzystać do sprawdzenia systemu operacyjnego i jeśli jest

123
00:10:39,790 --> 00:10:43,820
on równy Androidowi, to tutaj renderuję md create jako

124
00:10:43,820 --> 00:10:49,820
ikonę, w przeciwnym razie tworzę iOS i to tylko jedna ikona, którą wybrałem wcześniej.

125
00:10:49,850 --> 00:10:56,640
Teraz oczywiście możemy również skonfigurować rozmiar, a ja przykleję się do mojego starego dobrego 23, a ponadto ustaw

126
00:10:56,760 --> 00:11:02,130
kolor, jeśli chcesz, i teraz, oczywiście, nie powinny to być kolory podstawowe, ponieważ

127
00:11:02,190 --> 00:11:07,620
wtedy ta ikona zawsze mają ten kolor, zamiast tego ten kolor powinien być przypisany

128
00:11:07,710 --> 00:11:13,310
przez szufladę, która wie, czy element jest wybrany, czy nie, i który odpowiednio zmieni kolor.

129
00:11:13,380 --> 00:11:16,570
Więc tutaj powinieneś uzyskać dostęp do konfiguracji szuflady. TintColor, a to mówi

130
00:11:16,680 --> 00:11:22,110
ci, jaki kolor powinien mieć w tej chwili, a ten kolor odcienia zmieni się w zależności od tego,

131
00:11:22,110 --> 00:11:24,330
czy jest on aktualnie wybrany, czy nie.

132
00:11:25,370 --> 00:11:29,350
Tak jest w przypadku moich zamówień, przepraszam, ikona tutaj

133
00:11:29,540 --> 00:11:30,470
powinna

134
00:11:30,580 --> 00:11:39,080
być listą MD i listą iOS, a nie tworzyć. To jest teraz moja konfiguracja zamówienia z ikonami listy i oczywiście to

135
00:11:39,440 --> 00:11:46,130
samo można zrobić tutaj, kopiując ją w nawigatorze produktów i tam, chcę użyć koszyka md lub koszyka iOS, więc ta

136
00:11:46,130 --> 00:11:54,490
ikona koszyka ponownie, a teraz jest to prawie gotowy do użycia. Jedną rzeczą, którą musisz zrobić, to zaimportować React

137
00:11:54,490 --> 00:11:59,500
z React teraz do tego pliku nawigatora, ponieważ teraz używasz

138
00:11:59,500 --> 00:12:06,610
komponentów o tej składni jsx. Jak wiadomo, jsx jest

139
00:12:06,610 --> 00:12:14,260
kompilowany lub konwertowany na React. createElement na końcu, dlatego musisz zaimportować React, aby

140
00:12:14,260 --> 00:12:16,190
ta składnia działała tutaj.

141
00:12:16,510 --> 00:12:21,850
Teraz, gdy wrócisz, masz te ładne ikony obok swoich przedmiotów i są

142
00:12:21,850 --> 00:12:23,230
one również

143
00:12:23,230 --> 00:12:26,020
poprawnie kolorowe, również tutaj na Androidzie.

144
00:12:26,020 --> 00:12:32,110
A więc to już koniec bocznej szuflady, możemy też przejść do ekranu zamówień, a nawet zobaczyć

145
00:12:32,110 --> 00:12:32,920
tam zamówienie.

146
00:12:32,920 --> 00:12:37,450
Jednak w tej chwili koszyk nie jest wyczyszczony, dlatego jeśli klikniesz to kilka

147
00:12:37,450 --> 00:12:42,520
razy, faktycznie pojawi się ostrzeżenie, ponieważ wtedy klikniesz to zbyt szybko, a zatem utworzysz wiele

148
00:12:42,790 --> 00:12:48,700
zamówień z tym samym pseudo unikalnym identyfikatorem, w którym w końcu użyj aktualnego znacznika czasu, jeśli klikniesz to

149
00:12:48,700 --> 00:12:50,770
zbyt szybko kilka razy, to

150
00:12:50,860 --> 00:12:56,110
ten sam znacznik czasu, dlatego właśnie to ostrzeżenie nadchodzi i chciałbym wyczyścić koszyk po złożeniu zamówienia.

151
00:12:56,860 --> 00:13:02,050
Upewnijmy się więc, że wyczyściliśmy koszyk po złożeniu zamówienia, a następnie oczywiście upewnijmy się, że

152
00:13:02,110 --> 00:13:04,930
wysyłamy zamówienia w ładniejszy sposób niż obecnie.