Do przedmiotów w koszyku.
Teraz ponownie utworzę osobny komponent dla każdego elementu koszyka, który
chcę tu wydrukować.
Mógłbym to zrobić tutaj, ale znowu, będzie to trochę dłuższy komponent i nie chcę nadmuchać tego pliku i
faktycznie użyję go również w innym miejscu później, co może zabrzmieć dziwnie,
biorąc pod uwagę, że mamy tylko jeden ekran koszyka, ale zobaczysz, gdzie jeszcze
możemy użyć elementu koszyka później.
W tym celu wróćmy do folderu komponentów i tam w folderze sklepu
i dodajmy CartItem. plik js obok pozycji produktu.
Teraz oczywiście mamy tam normalny komponent React, więc znasz grę, w jaki
sposób są one tworzone.
Importujemy React z React, a tutaj, ponieważ jest to składnik, który powinien coś wypisać, zaimportujemy
wiązkę składników z React Native, podstawowych operacji podstawowych, z którymi zbudowaliśmy interfejs użytkownika.
Potrzebuję widoku, potrzebuję tekstu, na pewno potrzebuję tutaj arkusza stylów, a następnie dodam tutaj moją stałą, element koszyka, który
otrzymuje rekwizyty, a na koniec tutaj zwrócę trochę kodu jsx. Dodam tutaj mój styl ze
stylem tworzenia arkusza
stylów i wyeksportuję go jako domyślny element koszyka.
Teraz kod jsx, który powinien zostać tutaj zwrócony, oczywiście zawsze zależy od ciebie, ale
będę miał widok tutaj i w tym widoku chcę podać ilość i tytuł kursu, a także całkowitą kwotę
dla tego elementu koszyka w przypadku dodaliśmy więcej niż jeden, to nie jest to tylko
cena pojedynczego przedmiotu, ale oczywiście cena razy ilość i faktycznie chcę też mieć przycisk, który
pozwoli mi usunąć ten przedmiot
z koszyka, ikonę kosza.
Więc na koniec będę miał tutaj wiersz z tekstem, a ten tekst będzie miał ilość i tytuł, więc
tam będę miał ilość i tytuł, a właściwie to powinno być inaczej stylizowane, więc zawijam ilość tutaj do
osobnego węzła tekstowego i zrób to samo dla tytułu, tak że mam
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
razem, kolejnego kawałka tekst, który jest tutaj całkowitą kwotą tego przedmiotu,
więc kwota, a następnie przycisk, a właściwie nie przycisk, ale ikona, którą można nacisnąć.
Zbuduję więc własną dotykową rzecz z dotykalnym kryciem i oczywiście, możesz znowu
zrobić to zróżnicowanie platformy dla efektu falowania, ale pójdę z kryciem na obu
platformach tutaj i zaimportuję jony z @ expo / vector-icons które już dodaliśmy wcześniej, ponieważ
chcę mieć
tutaj tylko ikonę, którą możemy nacisnąć, więc tutaj chcę mieć dotykalną nieprzezroczystość
i owinąć ją wokół ikony, którą możemy dodać za pomocą Ionicons, jak dodałeś wcześniej w
tym kursie, z tym jak komponent tutaj, a następnie po prostu użyj nazwy, która
powinna różnić się w zależności od platformy, ponieważ nazwa jest identyfikatorem ikony, a
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
będzie to kosz na iOS, który wyświetla ładną ikonę kosza, i możemy również nadać tej ikonie rozmiar powiedzmy
23, który znowu powinien wyglądać całkiem ładnie i kolor, a tutaj, właściwie użyję czerwonego, ponieważ
usuwa to przedmiot, więc powinien mieć warni kolor powiedziałbym. Dotykalne nieprzezroczystość po naciśnięciu powinno coś zrobić i powinno przekazać zdarzenie
press do komponentu, który używa
komponentu elementu koszyka, więc spodziewam się otrzymać prop przy usuwaniu, ta nazwa jak zawsze zależy od
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
to jest deklaracja stylu, którą możemy dodać później.
Mówiąc o stylach, istnieje oczywiście
więcej stylów do dodania, na przykład tutaj, w widoku z góry,
dam temu stylowi elementu koszyka, ten
tekst może
wtedy otrzymać styl danych elementu. Ten tekst z ilością może otrzymać styl, który możemy nazwać stylami. ilość, znowu wszystkie te
identyfikatory stylu, jak zawsze, zależą wyłącznie od Ciebie.
Tutaj w tytule mam styl
tytułu, a następnie w tym widoku ponownie dodam styl danych elementu, więc ponownie użyję tego stylu, ponieważ chcę mieć
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,
a tam dodaj element koszyka,
który jest naszym stylem głównym, a następnie
dane i ilość przedmiotu,
a więc
ilość
danych przedmiotu, a następnie tytuł i ilość i ostatnia, ale nie ostatnia przynajmniej przycisk usuwania.
Więc to też musimy dodać tutaj. Teraz na przycisku usuwania, to proste,
po
prostu dodam margines po lewej stronie 20, aby uzyskać odstęp między ikoną a tekstem obok niej, a wraz
z tym przejdźmy do elementu koszyka.
Tam chcę mieć wypełnienie 10, kolor tła biały, nie użyję tutaj wyglądu
mojej karty, nie dodam tutaj cienia, możesz to zrobić, ale wolę inny
wygląd.
Ważny jest rząd kierunku wygiętego, aby wszystkie elementy w tym widoku, więc ten tekst i
ten widok były obok siebie w jednym i tym samym rzędzie. Wyjustuj zawartość powinna być odstępem między, tak
aby wszystkie puste przestrzenie między tymi dwoma blokami treści, a także dodam margines w kierunku poziomym wynoszącym 20,
aby zapewnić pewne odstępy
po lewej i po prawej stronie wokół moich elementów koszyka.
Teraz dane pozycji, to styl, który powtarzamy wokół ilości, tytułu i kwoty, a także
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
wyrównywanie pozycji, aby Wyśrodkuj, aby wyśrodkować całą zawartość w pionie. Teraz, jeśli chodzi o ilość, chcę ustawić rodzinę czcionek
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
specyficznych dla tekstu , więc weźmy zamiast tego widok, ale
z tym, wracając do ilości. Możemy nadać tej rodzinie
czcionkę open-sans, kolor może tego ciemnoszarego koloru, którego używaliśmy wcześniej dla cen,
teraz dla ilości i rozmiaru czcionki może 16, a
następnie tutaj dla tytułu, ustawię rodzina czcionek open sans pogrubiona, aby zrobić to pogrubienie,
nadaj temu czcionkę również rozmiar 16, a jeśli chodzi o ilość, zrobię dokładnie to samo.
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
tym stylu,
pozbyć się kwoty, ponieważ mamy dokładnie takie same definicje stylów, a teraz używamy głównego tekstu tutaj zamiast
tytułu i tutaj zamiast tego kwoty.
W porządku.
To jest
element koszyka, teraz użyjmy go
na ekranie koszyka za pomocą płaskiej
listy, ponieważ w tej chwili nie wyświetlamy żadnych elementów na ekranie koszyka.
Tak więc ten widok można teraz zastąpić płaską
listą, a dane, które tam siedzimy, powinny zawierać szereg przedmiotów w koszyku i właśnie to mamy tutaj
w stałej pozycji w
koszyku, więc skorzystajmy z tego tutaj.
Teraz
dodam też ekstraktor kluczy i tutaj zdecydowanie musisz go dodać, aby React Native wiedział, gdzie
można znaleźć klucz, ponieważ każdy element tutaj na końcu ma ten format i nie ma ani
klucza, ani klucza Identyfikator, ale wiemy, że identyfikator produktu może być użyty jako klucz, ponieważ będzie
unikalny dla każdego elementu.
Więc tutaj wskazuję na przedmiot. productId na końcu, a teraz
do renderowania przedmiotu, chcę użyć tego elementu koszyka, który właśnie dodaliśmy.
Więc tutaj musimy zaimportować element koszyka z folderu komponentów, folderu sklepu i tam, elementu koszyka, a następnie użyć tego elementu
koszyka w dół w naszej funkcji renderowania, w której uzyskujemy dane naszych przedmiotów
i gdzie następnie zwracamy nasz taki element koszyka, a teraz element koszyka, musimy przekazać jakieś dane,
prawda? W koszyku
mam teraz zastępcze symbole zastępcze, oczywiście tutaj spodziewam się, że dostanę ilość, powiedzmy na rekwizycie o nazwie ilość,
spodziewam się, że otrzymam mój tytuł na rekwizynie o nazwie tytuł i kwotę na rekwizycie o nazwie ilość i tam zadzwonię do
fixed do 2, aby upewnić się, że zawsze mamy dwa miejsca po przecinku i mamy
również rekwizyt przy usuwaniu, którego się spodziewamy.
Mamy więc ilość, tytuł, kwotę i po usunięciu, więc z powrotem na ekranie
koszyka, to musimy dodać, ilość to oczywiście itemData. pozycja. ilość, ponieważ pojedynczy element
tutaj jest oczywiście takim przedmiotem, dlatego też
będziemy mieli zapas ilości, a oprócz ilości musimy podać tytuł, kwotę i
usunąć.
Więc tytuł to oczywiście itemData. pozycja. produkt. tytuł, to nazwa, którą
tam wybrałem, na kwotę, którą możemy przekazać w itemData. pozycja. jeśli przyjrzymy się, w jaki sposób
definiujemy nasze dane, byłaby to suma, to jest to kwota na jeden przedmiot, bez względu na to, ile mamy
w nim ilości lub z uwzględnieniem ilości, którą faktycznie mamy.
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żę
tylko pustą
funkcję, a teraz jest to element koszyka, który chcę renderować to.
Spróbujmy. Dodajmy dwie czerwone koszule i niebieski dywan, przejdźmy do koszyka, a teraz
mam napisy tekstowe, które muszą być renderowane w elemencie tekstowym i wskazuje na pozycję koszyka, wiersz 14,
więc spójrzmy na to, tak,
to tutaj które moje IDE automatycznie dodało, ten biały znak chcę mieć tutaj po
mojej ilości. Naprawdę chcę to mieć
tutaj, więc dodam tylko jedną dodatkową spację przed zamknięciem tekstu. A teraz spróbujmy jeszcze raz, dwie
czerwone koszule, jeden niebieski dywan.
Zobacz kwotę tutaj,
zobacz tytuł tutaj, zobacz
sumę, a to oczywiście również sumuje się do tej sumy.
Teraz nadszedł czas, aby ten przycisk usuwania działał.