1
00:00:02,200 --> 00:00:08,590
Upewnijmy się więc, że nasze produkty na ekranie przeglądu produktów wyglądają

2
00:00:11,860 --> 00:00:16,520
nieco ładniej niż obecnie. Oczywiście teraz każdy element produktu jest po

3
00:00:16,540 --> 00:00:22,090
prostu renderowany jako tekst, jako komponent tekstowy i nie tego tu chcę, zamiast tego usunę import i utworzę

4
00:00:22,090 --> 00:00:24,970
nowy komponent, który powinien odpowiadać za mój element produktu.

5
00:00:25,060 --> 00:00:31,540
Teraz jedna ważna uwaga dotycząca tego, gdzie tworzymy ten komponent, możemy go utworzyć tutaj

6
00:00:31,560 --> 00:00:35,510
w przeglądzie produktów. Plik js, możemy oczywiście mieć

7
00:00:35,530 --> 00:00:41,890
więcej niż jeden komponent na plik, więc tutaj mogę dodać komponent produktu lub jak chcesz go nazwać, tak jak

8
00:00:41,890 --> 00:00:47,250
ten, wtedy możemy użyć tego komponentu w tym pliku, który jest oczywiście co planuję zrobić.

9
00:00:47,290 --> 00:00:52,870
Jest to wzorzec, którego możesz użyć, jeśli masz komponent, który jest naprawdę silnie powiązany z innym komponentem

10
00:00:53,080 --> 00:00:57,070
i dzielisz go tylko tak, aby każdy komponent był nieco bardziej czytelny.

11
00:00:57,370 --> 00:01:03,160
Gdy te osobne komponenty staną się bardzo duże, powinieneś rozważyć podzielenie ich na osobne pliki,

12
00:01:03,190 --> 00:01:08,350
aby Twoje pliki pozostały małe, a jeśli ludzie chcą spojrzeć na jeden z dwóch

13
00:01:08,350 --> 00:01:12,700
komponentów, nie muszą przewijać drugiego komponentu mogą nie być zainteresowani.

14
00:01:12,820 --> 00:01:18,730
To jedna rzecz, o której należy pamiętać. Oczywiście, jeśli planujesz również użyć komponentu w jeszcze innym

15
00:01:19,150 --> 00:01:25,990
komponencie, zawsze powinieneś przechowywać go w osobnym pliku, nie tylko po to, abyś mógł go wyeksportować jako domyślny, ponieważ możesz go

16
00:01:25,990 --> 00:01:29,950
również wyeksportować, jeśli jest przechowywany razem z innym komponentem, to nie jest

17
00:01:30,520 --> 00:01:36,550
główny powód, ale przede wszystkim, aby wyjaśnić, że jest to samodzielny komponent, który może i będzie używany w

18
00:01:36,550 --> 00:01:38,310
różnych częściach Twojej aplikacji.

19
00:01:38,350 --> 00:01:45,550
Teraz przedmiot produktu nie będzie nie tylko bardzo mały, co samo w sobie byłoby powodem, aby umieścić

20
00:01:45,550 --> 00:01:51,460
go w osobnym pliku, ale użyję go również w innym komponencie później lub w

21
00:01:51,460 --> 00:01:57,970
różnych miejscach aplikacji, nie jest to tylko istotne do ekranu przeglądu produktów i dlatego dodam go

22
00:01:57,970 --> 00:02:04,030
w folderze komponentów iw tym folderze komponentów, aby trochę uporządkować moje komponenty, dodam podfolder

23
00:02:04,120 --> 00:02:10,300
sklepu, w którym chcę umieścić wszystkie komponenty, które są bezpośrednio związane z funkcją sklepu lub

24
00:02:10,300 --> 00:02:12,950
ogólnie z funkcjami mojej aplikacji.

25
00:02:13,090 --> 00:02:19,390
Tam w podfolderze sklepu dodam ten ProductItem. plik js, a zobaczysz, które inne

26
00:02:19,390 --> 00:02:21,540
foldery dodam tutaj później.

27
00:02:21,550 --> 00:02:27,640
Ponownie, wszystkie te wzorce i praktyki, które tu pokazuję, są tylko możliwymi sposobami na to, ogólnie w

28
00:02:28,360 --> 00:02:34,480
moich kursach, a także w tym kursie, pokazuję wszystkie najlepsze praktyki, których możesz użyć, ale często w

29
00:02:34,480 --> 00:02:37,270
programowaniu, nie ma tylko jeden dobry lub

30
00:02:37,390 --> 00:02:43,180
zły sposób, więc praktyki i wzorce, które tu pokazuję, są praktykami i wzorami, które zobaczysz również w

31
00:02:43,180 --> 00:02:48,670
innych projektach, ale możesz także zobaczyć inne struktury folderów, w końcu zawsze możesz pracować ze

32
00:02:48,670 --> 00:02:55,480
strukturą, która działa dla ciebie, nie ma tutaj dobrego ani złego wyboru, chcę jedynie wyjaśnić moje uzasadnienie korzystania z tej

33
00:02:55,480 --> 00:03:00,910
struktury, która, mam nadzieję, pomoże ci zrozumieć, dlaczego go używam i dlaczego warto to przemyśleć.

34
00:03:01,900 --> 00:03:10,960
Więc tutaj plik produktu, ProductItem. Plik js oczywiście będzie zawierał element produktu, który jest normalnym składnikiem funkcjonalnym,

35
00:03:10,960 --> 00:03:16,110
który otrzymuje rekwizyty, a na koniec zwróci kod jsx, a zatem ponieważ zawiera kod

36
00:03:16,120 --> 00:03:22,750
jsx, musimy zaimportować React z React, a tutaj również ja importuj rzeczy z React Native, ponieważ tutaj będę

37
00:03:23,170 --> 00:03:30,070
teraz pracować z tymi prymitywami React Native, aby naprawdę zbudować mój komponent, ponieważ odtąd potrzebuję widoku, potrzebuję tekstu, chcę

38
00:03:30,520 --> 00:03:34,930
również użyć obrazu, ponieważ „ Wyświetlę tutaj obraz produktu, a także

39
00:03:34,930 --> 00:03:42,310
arkusz stylów, ponieważ na pewno też to zrobimy. Dlatego możesz już dodać tutaj stałą stylów, którą

40
00:03:42,310 --> 00:03:48,190
tworzymy za pomocą Arkusza stylów. Utwórz, do którego przekazujemy obiekt

41
00:03:48,190 --> 00:03:56,170
JavaScript, a na koniec domyślnie eksportujemy ten element produktu. Teraz tutaj, w tym komponencie mam na myśli, że

42
00:03:56,170 --> 00:04:02,350
możemy zacząć tworzyć kod jsx stanowiący element produktu i będzie to komponent prezentacyjny, co oznacza,

43
00:04:02,350 --> 00:04:08,500
że nie będzie tu żadnej logiki, nie będziemy zarządzać żadnym stanem wewnętrznym, będzie to po

44
00:04:08,530 --> 00:04:14,630
prostu komponent, którego możemy użyć w innych komponentach, aby uzyskać prawidłową stylizację i układ po

45
00:04:14,630 --> 00:04:21,250
wyjęciu z pudełka, więc ten komponent będzie odpowiedzialny za korzystanie z niektórych komponentów React Native oraz

46
00:04:21,400 --> 00:04:28,090
ich układanie i stylizowanie w określony sposób. Tak więc tutaj w końcu chcę zwrócić

47
00:04:28,090 --> 00:04:34,150
widok, który otacza wszystko, co porządkuje wszystko, co możemy również stylizować, aby

48
00:04:34,150 --> 00:04:42,100
uzyskać wygląd tego wózka z może cieniem, może zaokrąglonymi narożnikami, cokolwiek chcesz i tam, teraz mają

49
00:04:42,100 --> 00:04:50,460
różne części, na przykład na pewno będziemy mieć tam obraz, obraz produktu, chcę też mieć tytuł i

50
00:04:50,460 --> 00:04:53,480
cenę, więc potrzebujemy trochę tekstu tutaj,

51
00:04:53,700 --> 00:05:04,630
więc dla tytułu tu i tutaj, to za cenę w dolarach i niższą, chcę też mieć widok z przyciskami, więc tutaj możemy

52
00:05:05,200 --> 00:05:07,650
w tej chwili użyć

53
00:05:07,650 --> 00:05:14,680
wbudowanego komponentu przycisku, w którym możemy następnie dodać produkt do koszyka lub wyświetlić szczegóły

54
00:05:14,680 --> 00:05:22,120
, więc tam, gdzie mamy te dwie opcje w zasadzie i oczywiście musimy dodać tutaj

55
00:05:22,120 --> 00:05:26,760
procedury obsługi onPress. Więc to jest bardzo podstawowy szkielet, prawdopodobnie

56
00:05:26,770 --> 00:05:30,880
nie ostatni, będziemy musieli zobaczyć, jak możemy tutaj wszystko stylizować, ale taki

57
00:05:30,930 --> 00:05:32,390
jest układ, którego chcę.

58
00:05:32,500 --> 00:05:37,460
Nawiasem mówiąc, zawijam tutaj moje przyciski, ponieważ chcę mieć je obok siebie w rzędzie, a

59
00:05:37,510 --> 00:05:43,030
mając widok wokół nich, możemy stylizować ten widok, tak aby korzystał z rzędu kierunku wygięcia i

60
00:05:43,040 --> 00:05:43,960
tak dalej.

61
00:05:43,990 --> 00:05:45,040
Więc

62
00:05:45,040 --> 00:05:47,320
to jest konfiguracja, z

63
00:05:47,440 --> 00:05:49,850
którą możemy tutaj pracować,

64
00:05:49,960 --> 00:05:53,980
teraz dodajmy trochę stylizacji i do tego chcę

65
00:05:53,980 --> 00:05:59,980
użyć lub zacząć tutaj od otaczającego widoku, w którym konfiguruję taki styl

66
00:05:59,980 --> 00:06:03,900
produktów, dlatego tutaj w arkuszu stylów dodaję taki

67
00:06:04,020 --> 00:06:07,200
produkt, dodaj mój klucz produktu tutaj

68
00:06:07,210 --> 00:06:17,650
i oczywiście teraz, to zależy od ciebie, jak chcesz to stylizować, chcę mieć wygląd tej karty, dlatego dodam cień, kolor cienia,

69
00:06:17,650 --> 00:06:27,580
który może być czarny, krycie cienia która może wynosić 0. 26, przesunięcie cienia, gdzie mam przesunięcie szerokości zero i przesunięcie

70
00:06:27,610 --> 00:06:32,080
wysokości dwa, a promień cienia ośmiu może i jak

71
00:06:32,080 --> 00:06:36,490
zawsze baw się tymi wartościami, aby znaleźć konfigurację.

72
00:06:36,490 --> 00:06:39,320
Teraz możesz pamiętać, że cień działa tylko

73
00:06:39,340 --> 00:06:45,670
na iOS, więc dla Androida dodam tutaj właściwość elewacji i ustawię ją na pięć, może znowu

74
00:06:45,670 --> 00:06:48,070
możesz tam eksperymentować z różnymi wartościami

75
00:06:48,160 --> 00:06:52,500
i chcę mieć promień krawędzi 10, ponieważ Chcę mieć zaokrąglone rogi

76
00:06:52,510 --> 00:06:54,250
i znowu, to jest

77
00:06:54,250 --> 00:07:00,400
coś, czego chcę tutaj, czego nie musisz robić. Dodam też kolor tła biały, aby mieć pewność, że

78
00:07:00,430 --> 00:07:05,290
nasz koszyk tutaj, nasz produkt zawsze ma ten kolor tła, nawet jeśli nasza główna

79
00:07:05,290 --> 00:07:14,190
aplikacja powinna później użyć innego koloru tła. To jest mój produkt, moje opakowanie wokół całego produktu. Dodatkowo chcę tutaj ustawić swoją wysokość,

80
00:07:14,190 --> 00:07:16,920
każdy produkt powinien mieć wysokość 300

81
00:07:16,920 --> 00:07:21,750
pikseli i oczywiście tę wartość można również dostosować do swoich

82
00:07:21,750 --> 00:07:22,670
wymagań.

83
00:07:22,740 --> 00:07:28,050
Możesz oczywiście również uczynić to dynamicznym za pomocą interfejsu API wymiarów, gdy

84
00:07:28,050 --> 00:07:34,830
nauczyłeś się tego w module responsywnym, a ja dodam margines 20 we wszystkich kierunkach wokół każdego

85
00:07:34,860 --> 00:07:42,070
elementu produktu, abyśmy mieli odstępy we wszystkich kierunkach. Dzięki tej konfiguracji możemy rozpocząć pracę nad wyprowadzaniem czegoś, więc

86
00:07:42,230 --> 00:07:47,330
obraz potrzebuje źródła i otrzymamy tutaj obraz sieci, ponieważ jeśli spojrzysz na fikcyjne dane,

87
00:07:47,330 --> 00:07:52,940
wszystkie te adresy URL obrazów są adresami URL, to również my mamy w tym modelu, oczekujemy

88
00:07:52,940 --> 00:07:54,260
tutaj adresu URL,

89
00:07:54,290 --> 00:07:59,480
więc obraz sieciowy, który byłby oczywiście domyślny dla każdego sklepu, który budujesz, ponieważ nigdy

90
00:07:59,480 --> 00:08:06,740
nie umieścisz wszystkich zdjęć produktów w swojej aplikacji, przynajmniej jeśli nie jest to część sklep z aplikacjami do gry, ale

91
00:08:06,740 --> 00:08:09,070
jeśli jest to sklep, w którym

92
00:08:09,110 --> 00:08:14,070
ludzie mogą tworzyć produkty, oczywiście ludzie będą tworzyć produkty dynamicznie po rozpowszechnieniu aplikacji,

93
00:08:14,240 --> 00:08:20,300
więc nie jest możliwe włączenie wszystkich obrazów do aplikacji, zamiast tego muszą być przechowywane na serwerze .

94
00:08:21,450 --> 00:08:26,740
Dlatego tutaj musimy przekazać obiekt do źródła, w którym ustawiliśmy właściwość URI, i który

95
00:08:26,910 --> 00:08:32,120
zostanie teraz odebrany z zewnątrz, ponieważ ten element produktu jest prezentacyjny, więc wszelkie

96
00:08:32,130 --> 00:08:38,060
dane do wyświetlenia muszą zostać przekazane przez rekwizyty i tam można się spodziewać rekwizytu obrazu,

97
00:08:38,070 --> 00:08:40,680
ale tak jak w przypadku wszystkich

98
00:08:40,680 --> 00:08:47,610
rekwizytów we własnych komponentach, możesz wybrać dowolne nazwy. Jeśli chodzi o tytuł, spodziewam się propozycji tytułu, a za cenę

99
00:08:47,610 --> 00:08:52,740
spodziewam się propozycji ceny. Przy okazji zatrzymam tutaj znak dolara, ponieważ cena będzie tylko liczbą i

100
00:08:52,740 --> 00:08:55,210
oczywiście chcę mieć znak dolara przed tym.

101
00:08:55,350 --> 00:09:02,640
A teraz jedna mała uwaga: chcę mieć pewność, że cena, którą otrzymuję, ma zawsze dokładnie dwa miejsca po przecinku i

102
00:09:03,020 --> 00:09:10,520
możemy to osiągnąć, dzwoniąc na to ustalone i przekazując dwa. Naprawiono to funkcja dostępna w liczbach

103
00:09:10,560 --> 00:09:17,940
w Javascripcie, która konwertuje to w zasadzie na ciąg ze stałą liczbą miejsc po

104
00:09:17,940 --> 00:09:21,870
przecinku, a tutaj ograniczam to do dwóch

105
00:09:21,870 --> 00:09:23,210
miejsc po

106
00:09:23,280 --> 00:09:34,310
przecinku, to jest normalny Javascript, nic specyficznego dla React Native. Teraz, kiedy naciśniemy przycisk widoku szczegółów, wywołam rekwizyty przy widoku szczegółów, więc

107
00:09:34,400 --> 00:09:41,960
ponownie używam tutaj nazwy, którą możesz skonfigurować lub nazwać, jak chcesz, ale pomysł jest taki, że rekwizyty

108
00:09:41,960 --> 00:09:47,240
przy widoku szczegółów wskazują na funkcję, która w koniec jest wykonywany

109
00:09:47,240 --> 00:09:51,220
po naciśnięciu tego przycisku, a zatem tutaj, jeśli

110
00:09:51,230 --> 00:09:58,900
ten przycisk, przycisk koszyka, zostanie naciśnięty, wskażę funkcję, którą spodziewam się włączyć na prop dodaniu do koszyka.

111
00:09:58,940 --> 00:10:03,650
Ponownie, możesz nazwać te rekwizyty, jak chcesz, ale kiedy używasz swojego komponentu, musisz

112
00:10:03,740 --> 00:10:10,370
upewnić się, że są dostępne i że otrzymają wartości, które są funkcjami, które są następnie uruchamiane przez te przyciski.

113
00:10:10,370 --> 00:10:14,300
Teraz otrzymujemy wszystkie dane. Teraz dla obrazu, ponieważ

114
00:10:14,420 --> 00:10:21,440
jest to obraz sieciowy, musimy ustawić szerokość i wysokość, ponieważ obraz nie widzi tego z góry, ponieważ

115
00:10:21,440 --> 00:10:24,600
mógłby to zrobić dla obrazu lokalnego, nie może

116
00:10:24,620 --> 00:10:31,810
tego zrobić dla sieci obraz, więc tutaj wskażę style. obraz i na razie dodam ten klucz obrazu do mojego arkusza stylów.

117
00:10:31,820 --> 00:10:37,790
Ponownie, to od Ciebie zależy, jak to stylizujesz, ale ustawię to na szerokość,

118
00:10:37,790 --> 00:10:38,750
powiedzmy

119
00:10:38,750 --> 00:10:46,580
60%, pamiętaj, że ogólny produkt ma szerokość 100%, ale wysokość 60%, ponieważ ogólny produkt przedmiot tutaj ma

120
00:10:46,580 --> 00:10:52,730
wysokość 300 i chcę mieć tam obraz, który powinien również zająć większość wysokości, ale

121
00:10:53,000 --> 00:10:58,520
mam również tytuł i cenę oraz moje guziki i te też powinny

122
00:10:58,520 --> 00:10:59,920
się tam zmieścić,

123
00:11:00,020 --> 00:11:02,240
więc „ Daję obrazowi

124
00:11:02,360 --> 00:11:10,560
60% wysokości, aby inne rzeczy tutaj podzieliły pozostałe 40%. Tak więc, to jest obraz, teraz oczywiście obraz to nie

125
00:11:10,560 --> 00:11:16,230
wszystko, co mamy tutaj, my również mamy nasz tytuł, mamy naszą cenę i

126
00:11:16,230 --> 00:11:18,800
ja też chcę to stylizować.

127
00:11:18,840 --> 00:11:24,980
Więc do tytułu dodam styl tytułu tutaj, a do ceny dodam, powiedzmy styl ceny, a

128
00:11:25,080 --> 00:11:32,490
tutaj dla tych przycisków, dodam również styl do otaczającego widoku i nadam temu nazwę akcje i oczywiście wszystkie

129
00:11:32,490 --> 00:11:41,020
te nazwy stylów, jak zawsze, zależą wyłącznie od Ciebie. Tutaj chcę dodać mój

130
00:11:41,050 --> 00:11:54,860
tytuł oraz cenę i właściwość akcji do mojego arkusza stylów tu i teraz w tytule, możesz

131
00:11:54,860 --> 00:11:59,900
oczywiście stylizować to w dowolny sposób.

132
00:11:59,910 --> 00:12:01,970
Nie mamy tutaj żadnych niestandardowych

133
00:12:02,070 --> 00:12:05,430
czcionek, dodam je wkrótce, ale na razie zignoruję to

134
00:12:05,610 --> 00:12:11,610
i zacznę od rozmiaru czcionki 18 i chcę dodać margines w pionie, więc góra i dół

135
00:12:11,610 --> 00:12:21,570
3 lub 4, więc bardzo mały margines, ale wciąż margines wokół tego tytułu. W tej cenie ustawię rozmiar czcionki na 14,

136
00:12:21,840 --> 00:12:30,490
więc nieco mniejszy, i dam też ten kolor, który powinien być może 888, który

137
00:12:30,530 --> 00:12:34,380
jest podobny do szarawego, ciemnoszarego koloru.

138
00:12:34,380 --> 00:12:39,760
Teraz działania są umieszczane w tym widoku, w którym znajdują się przyciski, i dlatego chcę się upewnić, że

139
00:12:39,760 --> 00:12:42,450
przycisk znajduje się obok siebie, więc w jednym rzędzie.

140
00:12:42,670 --> 00:12:53,860
Podaję więc tutaj kierunek wygięcia wiersza, a także uzasadnię zawartość tak, aby pozostała między nimi pozostała przestrzeń, a

141
00:12:53,860 --> 00:13:02,980
ponadto chcę wyrównać elementy w środku pionowo, więc wzdłuż osi poprzecznej, która dla kierunku

142
00:13:02,980 --> 00:13:06,910
wygięcia rzędu jest osią pionową.

143
00:13:06,910 --> 00:13:08,890
Dzięki temu mamy trochę podstawowej

144
00:13:08,890 --> 00:13:14,920
stylizacji, teraz użyjmy tego komponentu, zanim dopracujemy konfigurację i stylizację. Tak więc komponent pozycji produktu, który

145
00:13:14,920 --> 00:13:20,110
eksportujemy tutaj w pliku pozycji produktu, można teraz wykorzystać w

146
00:13:20,110 --> 00:13:22,850
pliku przeglądu produktu, importując produkt

147
00:13:22,870 --> 00:13:29,680
z tego miejsca, więc wskażmy folder folderów komponentów, tam w podfolderze sklepu, a następnie

148
00:13:29,680 --> 00:13:35,340
pozycję produktu i teraz tego właśnie chcę użyć podczas renderowania moich przedmiotów.

149
00:13:35,350 --> 00:13:40,300
Produkt może być elementem samozamykającym, ponieważ wszystkie dane są odbierane przez rekwizyty, a nie między

150
00:13:40,300 --> 00:13:42,650
tagami otwierającymi i zamykającymi, teraz oczywiście

151
00:13:42,670 --> 00:13:45,340
musimy skonfigurować wszystkie rzeczy, których się tutaj spodziewamy.

152
00:13:45,340 --> 00:13:50,700
Oczekujemy tutaj obrazu, tytułu, ceny i naszych dwóch rekwizytów do obsługi zdarzeń, więc

153
00:13:50,710 --> 00:13:52,870
właśnie to musimy teraz podać.

154
00:13:53,560 --> 00:13:55,390
Stąd tutaj na produkcie, zacznę

155
00:13:55,510 --> 00:14:02,140
od obrazu i oczywiście jest to itemData. pozycja. imageUrl i

156
00:14:02,140 --> 00:14:08,800
zawsze musisz pamiętać, że itemData. item wskazuje jako produkt zgodnie z definicją w naszym modelu produktu,

157
00:14:08,800 --> 00:14:11,910
a zatem będzie miał własność imageUrl zapisaną w ten sposób, jeśli

158
00:14:11,920 --> 00:14:17,980
napisałeś inaczej, oczywiście musisz uzyskać do niego inny dostęp. Oprócz obrazu będziemy mieli

159
00:14:17,980 --> 00:14:26,290
również tytuł itemData. pozycja. tytuł, a poza tym będziemy mieć cenę z

160
00:14:26,320 --> 00:14:28,500
itemData. pozycja. cena,

161
00:14:28,510 --> 00:14:35,140
a następnie mamy tutaj dwie procedury obsługi zdarzeń, ponieważ mamy propozycję szczegółów na widok i

162
00:14:35,140 --> 00:14:41,470
prop dodawania do koszyka, które musimy dodać. Więc na widoku szczegółów zrobi coś później, na razie

163
00:14:41,890 --> 00:14:45,150
jest to po prostu pusta funkcja, a po dodaniu do

164
00:14:45,160 --> 00:14:47,650
koszyka zrobi coś później, na razie może

165
00:14:47,650 --> 00:14:54,280
to być również pusta funkcja, tak powinien wyglądać nasz produkt. Dzięki temu, jeśli uratujemy to, to

166
00:14:54,320 --> 00:14:57,850
powinieneś zobaczyć, nie jest jeszcze idealny, ale my

167
00:14:57,860 --> 00:15:01,640
się tam dostaniemy, nie jest tak naprawdę źle.

168
00:15:01,700 --> 00:15:07,300
Teraz zauważasz oczywiście, że przyciski są niewłaściwie pokolorowane, że ta przestrzeń nie jest tak naprawdę

169
00:15:07,300 --> 00:15:12,460
używana w sposób, w jaki powinna być tam używana, że może również chcemy

170
00:15:12,460 --> 00:15:21,050
wyśrodkować ten tekst, ale są to oczywiście rzeczy możemy popracować. Aby to udoskonalić, wróć tutaj do elementu produktu,

171
00:15:21,100 --> 00:15:23,900
zacznijmy od dwóch tekstów tutaj.

172
00:15:23,950 --> 00:15:30,790
Powinny one oczywiście być wyśrodkowane i można to zrobić w bardzo prosty sposób, zawijając je

173
00:15:30,790 --> 00:15:37,200
w widoku, przenosząc te dwa teksty tam, nadając temu widokowi styl i oczywiście możesz

174
00:15:37,250 --> 00:15:38,830
nazwać to tak,

175
00:15:38,840 --> 00:15:43,930
jak chcesz, nazwiemy wyszczególnia to, ponieważ w pewnym sensie układamy tam

176
00:15:44,090 --> 00:15:52,710
szczegóły produktu, więc dodam tutaj mój styl szczegółów do arkusza stylów i tam po prostu ustawię wyrównywanie elementów na środku.

177
00:15:52,880 --> 00:16:00,440
Wykorzystuje to kierunek wygięcia kolumny, domyślny i dlatego wyśrodkowuje się na osi poprzecznej, zawsze tak robi,

178
00:16:00,440 --> 00:16:04,870
ale oś poprzeczna dla kolumny kierunku wygięcia jest oczywiście

179
00:16:04,880 --> 00:16:12,920
od lewej do prawej, więc centruje się poziomo, co chcę tutaj i ja ' Daję również wysokość 15%.

180
00:16:12,930 --> 00:16:16,830
Pamiętaj, że obraz zajmuje 60%, więc dajemy to może

181
00:16:16,830 --> 00:16:21,070
15%, więc prawie połowa z pozostałych 40%, a nie całkiem

182
00:16:21,270 --> 00:16:24,960
połowa I dodam tutaj trochę dopełnienia 10.

183
00:16:24,960 --> 00:16:31,780
A dla przycisków tutaj, są one w mojej właściwości akcji, tam chcę ustawić

184
00:16:31,800 --> 00:16:36,340
wysokość na pozostałe 25%, to powinien być oczywiście

185
00:16:36,550 --> 00:16:41,300
ciąg, ponieważ mamy tutaj 60% wysokości, a następnie 15%

186
00:16:41,460 --> 00:16:43,360
tutaj, stąd tutaj

187
00:16:43,450 --> 00:16:50,860
Chcę zachować pozostałe 25%, a jeśli teraz to uratujemy, będzie to wyglądać znacznie lepiej.

188
00:16:50,860 --> 00:16:54,360
Teraz trochę dopełnienia po lewej i po prawej stronie byłoby

189
00:16:54,370 --> 00:17:01,810
również przydatne dla przycisków, więc w tej właściwości stylu akcji dodam może dopełnienie w poziomie 20, abyśmy mieli pewne wewnętrzne odstępy po

190
00:17:01,810 --> 00:17:05,230
lewej lub prawej stronie. Teraz, aby zmienić

191
00:17:05,290 --> 00:17:10,540
kolor przycisków, możemy po prostu przejść do składników przycisków, które są

192
00:17:10,550 --> 00:17:12,140
wbudowane w React

193
00:17:12,170 --> 00:17:18,250
Native i ustawić tutaj propozycję koloru na kolory, które należy zaimportować z folderu

194
00:17:18,260 --> 00:17:19,530
constans i

195
00:17:19,630 --> 00:17:30,510
z pliku kolorów i ustawić to następnie do kolorów podstawowych, również tutaj dla drugiego koloru, przycisk Dodaj do koszyka, a zatem drugi przycisk.

196
00:17:30,550 --> 00:17:32,220
Teraz mamy tutaj nasze

197
00:17:32,320 --> 00:17:37,090
przyciski, dodaj do koszyka i wyświetl szczegóły, a to nie wygląda tak źle.

198
00:17:37,120 --> 00:17:41,860
Jedyną rzeczą, którą możesz zauważyć, jest to, że nie mamy tutaj zaokrąglonych rogów

199
00:17:41,860 --> 00:17:48,280
u góry, a to dlatego, że nasz obraz jest w zasadzie jak nakładka na nasze tło, a tło

200
00:17:48,280 --> 00:17:49,570
to widok

201
00:17:49,570 --> 00:17:53,800
otaczający, obraz nie ma zaokrąglone rogi, a zatem nakładają się na nasze

202
00:17:53,800 --> 00:17:57,350
zaokrąglone rogi na otaczającym widoku. Aby to naprawić, możemy

203
00:17:57,520 --> 00:18:01,200
owinąć obraz w osobny widok, a jak wspomniałem wcześniej

204
00:18:01,450 --> 00:18:05,580
w trakcie kursu, w React Native normalne jest posiadanie kilku widoków

205
00:18:05,580 --> 00:18:13,480
zagnieżdżonych, ponieważ do tego widoku możemy teraz dołączyć styl, który możemy podaj identyfikator kontenera obrazu, który możemy teraz dodać do naszego

206
00:18:14,080 --> 00:18:20,350
arkusza stylów, a teraz dam ten kontener mojej szerokości i wysokości tutaj i na obrazie, dlatego po

207
00:18:21,040 --> 00:18:24,850
prostu dodam szerokość i wysokość 100%, ponieważ teraz jest on

208
00:18:24,850 --> 00:18:25,900
wewnątrz

209
00:18:25,950 --> 00:18:27,500
kontener, tutaj odnosi się

210
00:18:27,520 --> 00:18:28,750
to do rodzica,

211
00:18:28,750 --> 00:18:31,970
więc do tego kontenera, więc wysokość 60% zostanie

212
00:18:32,110 --> 00:18:35,200
również zastosowana do obrazu, ale na tym kontenerze

213
00:18:35,200 --> 00:18:40,200
obrazu możemy teraz dodać lewy górny promień obramowania o wartości 10 i górną

214
00:18:40,210 --> 00:18:42,020
krawędź prawidłowy promień 10, aby

215
00:18:42,100 --> 00:18:48,520
zaokrąglić te rogi, a teraz ważne, dodaj przepełnienie ukryte tutaj, ponieważ zapewni to, że każde dziecko, które

216
00:18:48,520 --> 00:18:53,400
jest naszym obrazem, oczywiście nie może nakładać się na to, co tutaj ustawiliśmy.

217
00:18:53,410 --> 00:18:57,960
Teraz dzięki tej konfiguracji dodajemy zaokrąglone rogi tutaj z powrotem na górę, a

218
00:18:57,970 --> 00:19:02,860
teraz są to elementy obrazu, które chcę tutaj i oczywiście jest to także przewijalna lista,

219
00:19:03,070 --> 00:19:08,110
na której widać również, że te obrazy są automatycznie ładowane leniwie, które można kontynuować pracę z.

220
00:19:08,800 --> 00:19:13,270
Oczywiście następnym celem może być to, że możemy również wyświetlić ekran szczegółów.