1
00:00:02,210 --> 00:00:04,450
Do przedmiotów w koszyku.

2
00:00:04,730 --> 00:00:08,030
Teraz ponownie utworzę osobny komponent dla każdego elementu koszyka, który

3
00:00:08,030 --> 00:00:09,240
chcę tu wydrukować.

4
00:00:09,260 --> 00:00:15,200
Mógłbym to zrobić tutaj, ale znowu, będzie to trochę dłuższy komponent i nie chcę nadmuchać tego pliku i

5
00:00:15,200 --> 00:00:19,500
faktycznie użyję go również w innym miejscu później, co może zabrzmieć dziwnie,

6
00:00:19,610 --> 00:00:23,930
biorąc pod uwagę, że mamy tylko jeden ekran koszyka, ale zobaczysz, gdzie jeszcze

7
00:00:23,930 --> 00:00:25,750
możemy użyć elementu koszyka później.

8
00:00:25,760 --> 00:00:30,890
W tym celu wróćmy do folderu komponentów i tam w folderze sklepu

9
00:00:30,920 --> 00:00:33,680
i dodajmy CartItem. plik js obok pozycji produktu.

10
00:00:33,710 --> 00:00:37,480
Teraz oczywiście mamy tam normalny komponent React, więc znasz grę, w jaki

11
00:00:37,490 --> 00:00:38,850
sposób są one tworzone.

12
00:00:39,080 --> 00:00:44,630
Importujemy React z React, a tutaj, ponieważ jest to składnik, który powinien coś wypisać, zaimportujemy

13
00:00:44,630 --> 00:00:50,170
wiązkę składników z React Native, podstawowych operacji podstawowych, z którymi zbudowaliśmy interfejs użytkownika.

14
00:00:50,300 --> 00:00:57,990
Potrzebuję widoku, potrzebuję tekstu, na pewno potrzebuję tutaj arkusza stylów, a następnie dodam tutaj moją stałą, element koszyka, który

15
00:00:57,990 --> 00:01:06,210
otrzymuje rekwizyty, a na koniec tutaj zwrócę trochę kodu jsx. Dodam tutaj mój styl ze

16
00:01:06,210 --> 00:01:09,340
stylem tworzenia arkusza

17
00:01:09,480 --> 00:01:16,050
stylów i wyeksportuję go jako domyślny element koszyka.

18
00:01:16,170 --> 00:01:21,540
Teraz kod jsx, który powinien zostać tutaj zwrócony, oczywiście zawsze zależy od ciebie, ale

19
00:01:21,540 --> 00:01:28,070
będę miał widok tutaj i w tym widoku chcę podać ilość i tytuł kursu, a także całkowitą kwotę

20
00:01:28,290 --> 00:01:34,080
dla tego elementu koszyka w przypadku dodaliśmy więcej niż jeden, to nie jest to tylko

21
00:01:34,080 --> 00:01:39,780
cena pojedynczego przedmiotu, ale oczywiście cena razy ilość i faktycznie chcę też mieć przycisk, który

22
00:01:39,780 --> 00:01:41,730
pozwoli mi usunąć ten przedmiot

23
00:01:41,730 --> 00:01:43,460
z koszyka, ikonę kosza.

24
00:01:44,070 --> 00:01:53,180
Więc na koniec będę miał tutaj wiersz z tekstem, a ten tekst będzie miał ilość i tytuł, więc

25
00:01:53,420 --> 00:02:02,850
tam będę miał ilość i tytuł, a właściwie to powinno być inaczej stylizowane, więc zawijam ilość tutaj do

26
00:02:02,850 --> 00:02:09,540
osobnego węzła tekstowego i zrób to samo dla tytułu, tak że mam

27
00:02:10,650 --> 00:02:21,600
tutaj dwa osobne węzły tekstowe na końcu, a następnie po tym bloku tekstowym tutaj powinien być widok zgrupowania dwóch innych elementów

28
00:02:21,600 --> 00:02:28,060
razem, kolejnego kawałka tekst, który jest tutaj całkowitą kwotą tego przedmiotu,

29
00:02:28,110 --> 00:02:35,280
więc kwota, a następnie przycisk, a właściwie nie przycisk, ale ikona, którą można nacisnąć.

30
00:02:35,280 --> 00:02:40,740
Zbuduję więc własną dotykową rzecz z dotykalnym kryciem i oczywiście, możesz znowu

31
00:02:40,740 --> 00:02:46,650
zrobić to zróżnicowanie platformy dla efektu falowania, ale pójdę z kryciem na obu

32
00:02:47,370 --> 00:02:54,090
platformach tutaj i zaimportuję jony z @ expo / vector-icons które już dodaliśmy wcześniej, ponieważ

33
00:02:54,090 --> 00:02:55,110
chcę mieć

34
00:02:55,110 --> 00:03:00,480
tutaj tylko ikonę, którą możemy nacisnąć, więc tutaj chcę mieć dotykalną nieprzezroczystość

35
00:03:00,470 --> 00:03:07,040
i owinąć ją wokół ikony, którą możemy dodać za pomocą Ionicons, jak dodałeś wcześniej w

36
00:03:07,100 --> 00:03:13,340
tym kursie, z tym jak komponent tutaj, a następnie po prostu użyj nazwy, która

37
00:03:13,340 --> 00:03:19,190
powinna różnić się w zależności od platformy, ponieważ nazwa jest identyfikatorem ikony, a

38
00:03:19,190 --> 00:03:29,670
tam możemy sprawdzić system operacyjny platformy, a jeśli jest to Android, ikona, która powinna być używana, będzie miała nazwę md trash w przeciwnym razie

39
00:03:29,670 --> 00:03:37,410
będzie to kosz na iOS, który wyświetla ładną ikonę kosza, i możemy również nadać tej ikonie rozmiar powiedzmy

40
00:03:37,410 --> 00:03:43,890
23, który znowu powinien wyglądać całkiem ładnie i kolor, a tutaj, właściwie użyję czerwonego, ponieważ

41
00:03:43,890 --> 00:03:52,490
usuwa to przedmiot, więc powinien mieć warni kolor powiedziałbym. Dotykalne nieprzezroczystość po naciśnięciu powinno coś zrobić i powinno przekazać zdarzenie

42
00:03:52,490 --> 00:03:54,520
press do komponentu, który używa

43
00:03:54,520 --> 00:04:00,460
komponentu elementu koszyka, więc spodziewam się otrzymać prop przy usuwaniu, ta nazwa jak zawsze zależy od

44
00:04:00,460 --> 00:04:11,170
ciebie, która posiada funkcję, która jest w kończy się wtedy wykonanie i możemy również tutaj dodać styl, bardzo prosty styl, w którym wskazuję na przykład przycisk usuwania i

45
00:04:11,170 --> 00:04:14,360
to jest deklaracja stylu, którą możemy dodać później.

46
00:04:14,380 --> 00:04:17,120
Mówiąc o stylach, istnieje oczywiście

47
00:04:17,260 --> 00:04:22,420
więcej stylów do dodania, na przykład tutaj, w widoku z góry,

48
00:04:22,420 --> 00:04:25,390
dam temu stylowi elementu koszyka, ten

49
00:04:27,910 --> 00:04:29,410
tekst może

50
00:04:29,410 --> 00:04:37,060
wtedy otrzymać styl danych elementu. Ten tekst z ilością może otrzymać styl, który możemy nazwać stylami. ilość, znowu wszystkie te

51
00:04:37,060 --> 00:04:40,720
identyfikatory stylu, jak zawsze, zależą wyłącznie od Ciebie.

52
00:04:41,020 --> 00:04:43,600
Tutaj w tytule mam styl

53
00:04:44,970 --> 00:04:53,970
tytułu, a następnie w tym widoku ponownie dodam styl danych elementu, więc ponownie użyję tego stylu, ponieważ chcę mieć

54
00:04:53,970 --> 00:05:05,760
ten sam zestaw tutaj i ta ilość tutaj również uzyskać styl kwoty. Więc kilka stylów do dodania, przejdźmy do arkusza stylów,

55
00:05:05,760 --> 00:05:09,230
a tam dodaj element koszyka,

56
00:05:09,450 --> 00:05:13,640
który jest naszym stylem głównym, a następnie

57
00:05:13,970 --> 00:05:16,620
dane i ilość przedmiotu,

58
00:05:16,850 --> 00:05:18,500
a więc

59
00:05:20,780 --> 00:05:21,890
ilość

60
00:05:23,500 --> 00:05:33,140
danych przedmiotu, a następnie tytuł i ilość i ostatnia, ale nie ostatnia przynajmniej przycisk usuwania.

61
00:05:33,140 --> 00:05:38,490
Więc to też musimy dodać tutaj. Teraz na przycisku usuwania, to proste,

62
00:05:38,500 --> 00:05:39,100
po

63
00:05:39,100 --> 00:05:46,930
prostu dodam margines po lewej stronie 20, aby uzyskać odstęp między ikoną a tekstem obok niej, a wraz

64
00:05:46,930 --> 00:05:52,070
z tym przejdźmy do elementu koszyka.

65
00:05:52,110 --> 00:05:57,010
Tam chcę mieć wypełnienie 10, kolor tła biały, nie użyję tutaj wyglądu

66
00:05:57,010 --> 00:06:01,930
mojej karty, nie dodam tutaj cienia, możesz to zrobić, ale wolę inny

67
00:06:01,930 --> 00:06:02,420
wygląd.

68
00:06:02,560 --> 00:06:06,700
Ważny jest rząd kierunku wygiętego, aby wszystkie elementy w tym widoku, więc ten tekst i

69
00:06:06,700 --> 00:06:13,330
ten widok były obok siebie w jednym i tym samym rzędzie. Wyjustuj zawartość powinna być odstępem między, tak

70
00:06:13,330 --> 00:06:21,720
aby wszystkie puste przestrzenie między tymi dwoma blokami treści, a także dodam margines w kierunku poziomym wynoszącym 20,

71
00:06:22,380 --> 00:06:24,660
aby zapewnić pewne odstępy

72
00:06:24,880 --> 00:06:29,250
po lewej i po prawej stronie wokół moich elementów koszyka.

73
00:06:29,880 --> 00:06:36,000
Teraz dane pozycji, to styl, który powtarzamy wokół ilości, tytułu i kwoty, a także

74
00:06:36,630 --> 00:06:46,360
przycisk usuwania, dane pozycji powinny mieć elastyczny rząd wiersza, aby upewnić się, że pozycje tam są ustawione w rzędzie, a ja ustawię tutaj

75
00:06:46,360 --> 00:06:55,370
wyrównywanie pozycji, aby Wyśrodkuj, aby wyśrodkować całą zawartość w pionie. Teraz, jeśli chodzi o ilość, chcę ustawić rodzinę czcionek

76
00:06:55,370 --> 00:07:05,440
open-sans, nawiasem mówiąc, możemy faktycznie użyć tutaj widoku zamiast tekstu wokół tych dwóch węzłów tekstowych, ponieważ nie ustawiam tutaj żadnych stylów

77
00:07:05,440 --> 00:07:10,220
specyficznych dla tekstu , więc weźmy zamiast tego widok, ale

78
00:07:10,360 --> 00:07:15,430
z tym, wracając do ilości. Możemy nadać tej rodzinie

79
00:07:15,430 --> 00:07:22,240
czcionkę open-sans, kolor może tego ciemnoszarego koloru, którego używaliśmy wcześniej dla cen,

80
00:07:22,240 --> 00:07:27,820
teraz dla ilości i rozmiaru czcionki może 16, a

81
00:07:27,820 --> 00:07:35,740
następnie tutaj dla tytułu, ustawię rodzina czcionek open sans pogrubiona, aby zrobić to pogrubienie,

82
00:07:35,740 --> 00:07:43,760
nadaj temu czcionkę również rozmiar 16, a jeśli chodzi o ilość, zrobię dokładnie to samo.

83
00:07:46,090 --> 00:07:52,960
Dlatego oczywiście moglibyśmy również połączyć to w jeden i ten sam styl, może nazwać ten główny tekst lub coś w

84
00:07:52,960 --> 00:07:53,820
tym stylu,

85
00:07:53,830 --> 00:08:00,010
pozbyć się kwoty, ponieważ mamy dokładnie takie same definicje stylów, a teraz używamy głównego tekstu tutaj zamiast

86
00:08:00,010 --> 00:08:02,350
tytułu i tutaj zamiast tego kwoty.

87
00:08:05,070 --> 00:08:05,710
W porządku.

88
00:08:05,730 --> 00:08:06,840
To jest

89
00:08:06,840 --> 00:08:08,900
element koszyka, teraz użyjmy go

90
00:08:08,970 --> 00:08:11,040
na ekranie koszyka za pomocą płaskiej

91
00:08:11,280 --> 00:08:16,080
listy, ponieważ w tej chwili nie wyświetlamy żadnych elementów na ekranie koszyka.

92
00:08:16,380 --> 00:08:19,740
Tak więc ten widok można teraz zastąpić płaską

93
00:08:19,740 --> 00:08:27,080
listą, a dane, które tam siedzimy, powinny zawierać szereg przedmiotów w koszyku i właśnie to mamy tutaj

94
00:08:27,080 --> 00:08:29,030
w stałej pozycji w

95
00:08:29,150 --> 00:08:31,700
koszyku, więc skorzystajmy z tego tutaj.

96
00:08:31,700 --> 00:08:32,240
Teraz

97
00:08:32,240 --> 00:08:37,550
dodam też ekstraktor kluczy i tutaj zdecydowanie musisz go dodać, aby React Native wiedział, gdzie

98
00:08:37,550 --> 00:08:43,100
można znaleźć klucz, ponieważ każdy element tutaj na końcu ma ten format i nie ma ani

99
00:08:43,190 --> 00:08:48,650
klucza, ani klucza Identyfikator, ale wiemy, że identyfikator produktu może być użyty jako klucz, ponieważ będzie

100
00:08:48,650 --> 00:08:49,910
unikalny dla każdego elementu.

101
00:08:49,910 --> 00:08:54,920
Więc tutaj wskazuję na przedmiot. productId na końcu, a teraz

102
00:08:54,920 --> 00:09:00,030
do renderowania przedmiotu, chcę użyć tego elementu koszyka, który właśnie dodaliśmy.

103
00:09:00,140 --> 00:09:10,400
Więc tutaj musimy zaimportować element koszyka z folderu komponentów, folderu sklepu i tam, elementu koszyka, a następnie użyć tego elementu

104
00:09:11,060 --> 00:09:17,850
koszyka w dół w naszej funkcji renderowania, w której uzyskujemy dane naszych przedmiotów

105
00:09:17,850 --> 00:09:26,040
i gdzie następnie zwracamy nasz taki element koszyka, a teraz element koszyka, musimy przekazać jakieś dane,

106
00:09:26,040 --> 00:09:28,240
prawda? W koszyku

107
00:09:28,250 --> 00:09:34,350
mam teraz zastępcze symbole zastępcze, oczywiście tutaj spodziewam się, że dostanę ilość, powiedzmy na rekwizycie o nazwie ilość,

108
00:09:34,350 --> 00:09:42,080
spodziewam się, że otrzymam mój tytuł na rekwizynie o nazwie tytuł i kwotę na rekwizycie o nazwie ilość i tam zadzwonię do

109
00:09:42,090 --> 00:09:47,640
fixed do 2, aby upewnić się, że zawsze mamy dwa miejsca po przecinku i mamy

110
00:09:47,660 --> 00:09:49,910
również rekwizyt przy usuwaniu, którego się spodziewamy.

111
00:09:49,920 --> 00:09:53,830
Mamy więc ilość, tytuł, kwotę i po usunięciu, więc z powrotem na ekranie

112
00:09:53,830 --> 00:10:01,780
koszyka, to musimy dodać, ilość to oczywiście itemData. pozycja. ilość, ponieważ pojedynczy element

113
00:10:01,780 --> 00:10:06,740
tutaj jest oczywiście takim przedmiotem, dlatego też

114
00:10:06,940 --> 00:10:15,180
będziemy mieli zapas ilości, a oprócz ilości musimy podać tytuł, kwotę i

115
00:10:15,330 --> 00:10:16,930
usunąć.

116
00:10:17,010 --> 00:10:22,860
Więc tytuł to oczywiście itemData. pozycja. produkt. tytuł, to nazwa, którą

117
00:10:22,890 --> 00:10:30,810
tam wybrałem, na kwotę, którą możemy przekazać w itemData. pozycja. jeśli przyjrzymy się, w jaki sposób

118
00:10:30,810 --> 00:10:38,550
definiujemy nasze dane, byłaby to suma, to jest to kwota na jeden przedmiot, bez względu na to, ile mamy

119
00:10:38,790 --> 00:10:42,840
w nim ilości lub z uwzględnieniem ilości, którą faktycznie mamy.

120
00:10:43,110 --> 00:10:49,770
I na koniec, jeśli chodzi o usunięcie, powinniśmy wskazać na funkcję i w tej chwili nie mamy do tego logiki, więc wskażę

121
00:10:49,770 --> 00:10:50,600
tylko pustą

122
00:10:50,640 --> 00:10:57,370
funkcję, a teraz jest to element koszyka, który chcę renderować to.

123
00:10:57,400 --> 00:11:07,540
Spróbujmy. Dodajmy dwie czerwone koszule i niebieski dywan, przejdźmy do koszyka, a teraz

124
00:11:07,540 --> 00:11:14,940
mam napisy tekstowe, które muszą być renderowane w elemencie tekstowym i wskazuje na pozycję koszyka, wiersz 14,

125
00:11:14,950 --> 00:11:17,290
więc spójrzmy na to, tak,

126
00:11:17,380 --> 00:11:23,590
to tutaj które moje IDE automatycznie dodało, ten biały znak chcę mieć tutaj po

127
00:11:23,650 --> 00:11:26,270
mojej ilości. Naprawdę chcę to mieć

128
00:11:26,440 --> 00:11:32,810
tutaj, więc dodam tylko jedną dodatkową spację przed zamknięciem tekstu. A teraz spróbujmy jeszcze raz, dwie

129
00:11:32,830 --> 00:11:35,530
czerwone koszule, jeden niebieski dywan.

130
00:11:35,580 --> 00:11:36,920
Zobacz kwotę tutaj,

131
00:11:36,950 --> 00:11:38,470
zobacz tytuł tutaj, zobacz

132
00:11:38,560 --> 00:11:41,990
sumę, a to oczywiście również sumuje się do tej sumy.

133
00:11:43,580 --> 00:11:45,730
Teraz nadszedł czas, aby ten przycisk usuwania działał.