Aby dodać element akcji do nagłówka, zrobię coś, co zrobiłem również w sekcji nawigacji, w folderze
komponentów, chcę dodać własny
przycisk nagłówka, a teraz w
tym celu dodam nowy podfolder w tam, który wymienię UI, a mój pomysł tutaj jest prosty.
Mam folder sklepu, który zawiera wszystkie komponenty, których używam w moim sklepie,
które generują niektóre informacje związane ze sklepem. W folderze interfejsu użytkownika chcę mieć pewne
ogólne elementy składowe interfejsu użytkownika, których oczywiście używam również w tej aplikacji sklepu,
ale które nie są tak naprawdę skoncentrowane na tworzeniu danych związanych ze sklepem lub produktem,
ale które są po prostu tam, aby zapewnić domyślną stylizację lub układ, a to w tym folderze interfejsu użytkownika, w którym dodam
własny przycisk nagłówka, wchodząc tam i importując React z React, a następnie importując przycisk nagłówka z React nawigacyjnych przycisków nagłówka,
pakiet ten zainstalowałem na początku modułu, jeśli jeszcze tego nie zrobiłeś , upewnij się, że npm zainstalowałeś ten
pakiet, a następnie zaimportowałeś jony z @ expo / vector-icons.
Teraz, aby mieć pewność, że masz już zainstalowany, uruchom npm install --save @ expo / vector-icons, aby ten pakiet
był dostępny w twoim projekcie.
Oto import, którego potrzebuję tutaj,
teraz chcę również zaimportować moje kolory z folderu constans i tam kolory. plik js, a teraz tutaj, dodam mój
niestandardowy komponent przycisku nagłówka, który jest normalnym komponentem React na końcu, który otrzymuje rekwizyty i
musi zwrócić trochę jsx, i oczywiście wyeksportuję tutaj mój niestandardowy przycisk nagłówka i teraz
Zwrócony tutaj plik jsx to przycisk nagłówka Importuję z przycisków React nawigacyjnych przycisków
nagłówka, ale muszę go skonfigurować w określony sposób, użyj tutaj przycisku nagłówka z
React nawigacyjnych przycisków nagłówkowych. Po pierwsze, powinno to otrzymać wszystkie
rekwizyty, które tu dostaniemy, więc po prostu je przekażemy, ale dodatkowo ustawię tutaj element ikon
na Ionicons, dzięki czemu zawsze będziemy używać Ionicons do
renderowania tego i oczywiście możesz użyć jednego z różne zestawy ikon wektorowych dostarczone przez @ expo / vector-icons.
Ustawię rozmiar ikony na 23, co okazało się bardzo skuteczne, ale oczywiście możesz tutaj również
eksperymentować z różnymi wartościami, może
także, jeśli używasz innego zestawu ikon, wypróbuj inny rozmiar ikony. A jeśli chodzi o kolor, to zależy od
tego, ponieważ
na Androidzie mamy czerwone tło, na iOS nie, więc musimy ustawić
inny kolor w zależności od platformy, na której
działamy, więc faktycznie importuję platformę z React Native tutaj, a następnie możemy sprawdzić platformę tutaj, a jeśli wersja systemu
operacyjnego to Android, to
wiem, że mam to stałe pole
tła, dlatego ikona powinna być biała. Z drugiej strony w iOS tło nie jest
wypełnione, jest przezroczyste, dlatego w iOS ustawię kolor mojej ikony na Kolory. podstawowy.
Teraz możemy użyć tego, aby dodać ikonę tutaj na ekranie przeglądu produktów, tam w moich opcjach nawigacji,
chcę dodać moją prawą sekcję nagłówka, więc ikonę po prawej stronie mojego nagłówka i do tego
tutaj, musimy zaimportować kilka rzeczy, musimy zaimportować przyciski nagłówka i element z zainstalowanego pakietu
przycisków nagłówka React.
Oczywiście muszę też zaimportować własny przycisk nagłówka z przycisków nagłówka interfejsu użytkownika składników, więc ten składnik, w
którym właśnie pracowaliśmy, a teraz na dole, nagłówek po prawej to przyciski nagłówka jako opakowanie, które może zawierać wiele
elementów, ale dodam tylko jeden element, samozamykający się element, na przyciskach nagłówka, zanim
przejdziemy do elementu, musimy ustawić składnik przycisku nagłówka równy przyciskowi nagłówka, więc
tutaj mamy własny przycisk nagłówka. I przedmiot można teraz skonfigurować, powinien otrzymać tytuł, którym może
być
koszyk, powinien otrzymać nazwę ikony, a ja naprawdę chcę użyć innej ikony w zależności od
platformy, na której działamy, dlatego w React Native ja zaimportuje platformę, co jest opcjonalne, możesz użyć jednej i
tej samej ikony dla obu platform, ale myślę, że dobrze jest też mieć różne ikony.
A potem tutaj sprawdzę system operacyjny platformy, a jeśli jest to Android, chcę użyć ikony koszyka md, która jest ikoną koszyka Ionicon do
projektowania materiałów, w przeciwnym razie użyję ikony koszyka iOS i znowu znajdziesz wszystkie dostępne ikony z tej listy
ikon Pokazałem wam wcześniej w trakcie kursu,
listę ikon expo / ikon wektorowych i na koniec, ale nie tylko, gdy przedmiot zostanie wciśnięty, prawdopodobnie
chcemy coś zrobić, a na razie nie robię nic oprócz nas Zmienię to wkrótce.
Jeśli teraz to zapiszemy,
powinniśmy
zobaczyć tę ikonę tutaj,
oto jest nasz koszyk, również na Androida, a teraz musimy tylko upewnić się, że po
dotknięciu tego przejdziemy do ekranu naszego koszyka. W tym celu oczywiście musimy dodać logikę lub dane wyjściowe do ekranu koszyka.
Więc wewnątrz ekranu koszyka mamy oczywiście normalny
komponent React, więc
importujemy React z React, importujemy również coś z React Native i że coś jest komponentem widoku, który
może zawinąć nasz ekran, prawdopodobnie wyślemy jakiś tekst także.
Będziemy tam wyświetlać kilka elementów koszyka, co możemy zrobić z płaską
listą, aby mieć wbudowaną optymalizację, prawdopodobnie chcemy stylizować niektóre rzeczy za pomocą
arkusza stylów, a także zaimportuję wbudowany komponent przycisku. Teraz mój ekran koszyka jest jak zawsze elementem React i ustawię ten
obiekt stylów tutaj za pomocą arkusza stylów. Utwórz, abyśmy mogli stylizować ten komponent,
a na koniec eksportujemy tutaj nasz ekran koszyka jako domyślny.
Teraz możesz oczywiście zbudować ekran tego wózka w dowolny sposób, zbuduję go tak,
abyśmy mieli widok i w tym widoku chcę mieć dwie główne sekcje. Najwyższa sekcja jest jak podsumowanie, gdzie
widzę całkowitą kwotę i gdzie mam teraz przycisk zamówienia.
To będzie w jednym rzędzie, więc będę mieć tutaj widok zagnieżdżony, w którym mogę umieszczać
przedmioty obok siebie, w których mam tekst, w którym
mówię suma, a potem tutaj znak dolara, a może moja całkowita cena. Możemy to również zagnieździć, możesz mieć zagnieżdżone komponenty
tekstowe, jeśli pamiętasz bez problemów, aby nadać temu osobny kolor, na przykład, więc na razie
mam kod stały 19. 99 tam, ale później będzie to wyprowadzane dynamicznie.
Więc to
jedna rzecz, a ponadto w tym samym wierszu tutaj chcę mieć przycisk z tytułem zamówienia, w
którym mogę go nacisnąć, aby złożyć zamówienie, wyczyścić mój koszyk i dodać go do
moich zamówień, którymi musimy
jeszcze zarządzać i wyślij go na końcu ekranu zamówienia. Teraz poniżej tej sekcji podsumowującej chcę mieć płaską listę z moimi osobnymi produktami w koszyku,
abyśmy mogli naprawdę zobaczyć,
co jest w koszyku, jakie produkty tam są, ile jest każdego
produktu, więc to kolejna rzecz wyjdzie tam. W tym momencie dodam tylko
widok z tekstem koszyków jako symbol zastępczy, ale znowu będzie to płaska
lista w przyszłości, ale zacznijmy od sumy tutaj. Aby uzyskać tę sumę, możemy skorzystać
z Redux, ponieważ tam zarządzamy naszym koszykiem, więc możemy użyć selektora z React Redux, gdy nauczyłeś się
pobierać dane z naszego sklepu i tutaj, mam całkowitą kwotę mojego koszyka, którą mogę
otrzymać za pomocą selektora użycia z mojego stanu. wózek, plasterek. koszyk tutaj, ponieważ
w aplikacji. Plik js w połączonych reduktorach, przypisałem tutaj klucz koszyka do mojego reduktora koszyka.
Więc mam. koszyk, a następnie tam, wewnątrz
reduktora koszyka, zarządzam moją kwotą całkowitą i polem całkowitej kwoty, więc do tego musimy uzyskać dostęp tutaj, całkowita kwota.
Daje to całkowitą kwotę w koszyku i możemy teraz użyć tego na dole, a dzięki
temu, aby upewnić się, że to również dobrze wygląda, czas na stylizację.
Więc na najwyższym widoku tutaj dodam styl ekranu, może dlatego, że ostatecznie otacza
on
cały ekran, a następnie tutaj na tym widoku dodam styl podsumowania, ponieważ
zawiera wszystkie elementy podsumowania, a następnie
tutaj do tego tekstu dodam styl tekstu podsumowującego, a następnie dodam styl kwoty, abyśmy mogli stylizować ten tekst w różny sposób.
W przypadku
stylów, które chcę ustawić, przejdźmy do arkusza stylów i dodajmy ekran, podsumowanie, podsumowanie tekstu, a następnie, jak to nazwałam?
ilość i, oczywiście, jak zawsze całkowicie zależy od ciebie, jak chcesz to teraz stylizować.
Teraz zacznę od ekranu, w końcu chcę wziąć pełny rozmiar ekranu, jeśli potrzebujemy później
z płaską listą, ale zacznę od prostej i powiem tylko, że chcę mieć margines we wszystkim kierunki faktycznie
tutaj z 20, więc wokół wszystkiego, więc wokół jest trochę miejsca. Następnie tutaj podsumowanie, które jest naszym pudełkiem ze wszystkimi
pozycjami tam z zamówieniem teraz, a nasz tekst powinien używać elastycznego kierunku
wiersza, aby pozycjonować elementy w jednym rzędzie.
Poszedłem, aby wyrównać elementy na środku, aby upewnić się, że są wyśrodkowane w pionie i
na głównej osi. Chcę użyć justowania przestrzeni między nimi, aby elementy miały wolne miejsce między nimi, a elementy to
ten tekst tutaj i ten przycisk. Poza tym możemy dodać tutaj trochę marginesu,
być może
również 20, co jest szczególnie ważne, aby mieć trochę odstępu między podsumowaniem a naszą płaską
listą, dlatego faktycznie użyję dolnego marginesu, aby mieć tylko margines na dole i chcę dodać tutaj dopełnienie o
wartości 10, ponieważ podsumowanie powinno być w pewnym sensie w podwyższonym polu,
a dla tego pola tutaj przejdę do elementu produktu i skopiuję mój zestaw cieni tutaj i ramkę promień może mam tutaj i kolor tła,
dzięki czemu mam taki sam wygląd tutaj w koszyku i to oczywiście zależy od ciebie,
czy tego chcesz, czy nie, ale skopiuję to tam.
W przypadku tekstu podsumowującego chcę teraz użyć rodziny czcionek otwartych bez pogrubienia, aby naprawdę podświetlić tę sumę i rozmiar
czcionki 18, a dla ilości tekstu w nim ustawię
kolor na kolory. kolor akcentu.
Teraz, dla tego ważnego, oczywiście, musisz zaimportować kolory z folderu stałych, a następnie używam akcentu, a
nie podstawowego, aby naprawdę się wyróżnić. Aby zobaczyć, czy to wygląda tak, jak chcemy,
musimy upewnić się, że naciśnięcie tego przycisku nagłówka na ekranie przeglądu produktu faktycznie prowadzi
nas do ekranu koszyka i do tego potrzebne są dwie rzeczy.
Po pierwsze, musimy nawigować tutaj, ale zanim to zrobimy,
musimy zarejestrować ekran koszyka w naszym nawigatorze. Zrobię to najpierw, nic dziwnego, że zaimportuję tutaj mój ekran
koszyka z folderu ekranów, z folderu sklepu i tam z ekranu koszyka, a teraz jest to trzeci ekran,
który dodaję tutaj do tego nawigatora stosu, punktów koszyka na ekranie koszyka . Po dodaniu tej konfiguracji tutaj możemy wrócić do ekranu przeglądu
produktu i tam potrzebujemy teraz tej funkcjonalnej formy dla opcji nawigacji, ponieważ dane nawigacyjne pozwalają nam
na skorzystanie z propozycji nawigacji i wywołanie nawigacji, dlatego musimy
to zawinąć w innym obiekcie, który zwracamy,
a następnie tutaj możemy wywołać navData. nawigacja. nawiguj i tam, idę do koszyka,
a to jest oczywiście identyfikator, który właśnie wybrałem w
nawigatorze sklepu, tutaj. Z tym, zobaczmy, jeśli
kliknę tutaj, oto jesteśmy, to moja
suma,
właściwie myślę,
że kolor akcentu nie jest tam tak świetny,
więc wrócę do ekranu koszyka i stylizuję to, aby użyć podstawowy kolor również, ale najważniejsze,
że możemy tam pójść i jeśli teraz spróbuję dodać przedmioty do koszyka, dodałem koszulę dwa razy
i dywan raz, ta całkowita ilość wygląda mi dobrze. Spróbujmy również tego na Androidzie, aby upewnić się,
że tam również działa i ogólnie działa, dodam jeszcze jedną czerwoną koszulę, dlatego widzimy
tutaj problem ze sposobem wyświetlania. Aby to naprawić, na ekranie koszyka upewnij się, że w cenie
zawsze wypisujemy po prostu dwa miejsca po przecinku w kwocie z do stałej. Nawiasem mówiąc, jeśli zastanawiasz się, skąd to
się wzięło, ta długa liczba,
to nie jest błąd ani nic tak naprawdę React Native, jest
to normalne zachowanie JavaScript, gdy pracujesz z liczbami zmiennoprzecinkowymi i oczywiście do naprawy nie należy tutaj
wywoływać stylu, ale całkowitą kwotę koszyka. Więc to było normalne zachowanie, a
nie błąd. W ten sposób JavaScript wewnętrznie przechowuje liczby zmiennoprzecinkowe, które można powiedzieć, ale teraz upewniamy
się, że są one poprawnie generowane z dokładnością do dwóch miejsc po przecinku. Brakuje mi przycisku i tutaj chcę teraz użyć koloru, akcentu kolorystycznego,
aby mieć przycisk koloru akcentu. Więc jeśli teraz przejdę do mojego koszyka tutaj na iOS, tak właśnie
wygląda ten przycisk, tak teraz wygląda na Androidzie.
Zawsze możemy to nacisnąć, oczywiście chcę to wyłączyć, jeśli jednak nic nie ma w
koszyku i do tego musimy teraz również zdobyć przedmioty z koszyka. Tak więc przedmioty koszykowe można również pobrać za pomocą
selektora użycia, również z wycinka wózka, ale tam interesują nas rekwizyty z reduktora wózka.
Więc jeśli spojrzę na reduktor wózka, zobaczysz, że mamy właściwość przedmiotów.
To jest obiekt, który teraz
pobieram, więc przedmioty koszykowe to obiekt, a nie tablica, w rzeczywistości tablica byłaby dla mnie lepsza i dlatego użyję długiej
formy do uzyskania tego i zwrócę tablicę tutaj, a nie przedmiot. Możemy więc pobrać tutaj nasze przekształcone elementy
koszyka, na przykład tworząc nową tablicę wewnątrz tej funkcji selektora, a następnie możemy dodać pętlę for / in, aby przejść przez
wszystkie klucze w stanie. wózek. przedmiotów, aby przejść przez
wszystkie pary klucz-wartość w tym obiekcie przedmiotów
w koszyku, który tam mamy, i chcę dodać każdą
z nich jako przedmiot do przekształconych przedmiotów w koszyku. Więc popchnę obiekt JavaScript, który ma identyfikator produktu, powiedzmy, który jest
tylko moim kluczem, ponieważ w obiekcie przedmiotów koszyka identyfikatora identyfikator produktu jest przechowywany jako klucz,
jeśli pamiętasz,
więc teraz dodam go do właściwości identyfikatora produktu w tym obiekcie dodaję do tablicy transformowanych koszyków, a
poza tym będę miał tytuł mojego produktu, który oczywiście jest. wózek. elementy dla danego
klucza. productTitle.
Jeśli spojrzysz na model koszyka, zobaczysz, że tam tytuł produktu i cena produktu to nazwy własności, które
zawierają tytuł produktu i cenę produktu, więc w
ten sposób uzyskujemy dostęp do
obu, więc zrobię to samo tutaj dla ceny produktu, a następnie potrzebuję również ilości,
która jest stanem. wózek. elementy dla danego klucza. ilość i oczywiście także suma, która jest stanem. wózek. przedmiotów. klawisz. Podsumowując, znowu w zasadzie to, co mieliśmy tutaj w koszyku.
Mówię więc, że tworzę nowy
element koszyka, ale nie z moim modelem, ponieważ jest to element
koszyka z dodatkową właściwością ID produktu, więc mam go tutaj, a teraz jest to tablica przekształconych elementów koszyka które
zwracam po tym dla pętli, aby ten selektor na końcu zwracał tablicę, a nie obiekt, więc
elementy koszyka są
teraz tablicą, która ułatwia nam korzystanie z niej na płaskiej liście, a także pozwala nam sprawdzić tutaj,
w przycisku Zamów teraz, czy chcemy go wyłączyć, po prostu sprawdzając długość tej tablicy, którą
mamy teraz w koszyku.
Więc tutaj, na przycisku, możemy
ustawić wyłączoną podpórkę, którą obsługuje na szczęście, jest to wbudowany komponent, który po prostu ma wyłączoną podpórkę i
tam mogę sprawdzić, czy długość elementów koszyka jest równa zero, jeśli tak, to ja wiem, że jest pusty i wtedy naprawdę chcę wyłączyć przycisk. Tak więc wyłączone otrzymuje wartość prawda lub fałsz, domyślnie jest to fałsz, ale ustawię wartość true, jeśli
długość elementów koszyka wynosi 0. A teraz widzisz, jeśli przejdę
do ekranu koszyka, to jest wyłączone, jeśli
jednak dodam produkt i tam przejdę, to jest włączone i oczywiście możesz również użyć innego koloru przycisku zamówienia teraz, jeśli chcesz.
Teraz jesteśmy o krok bliżej do
gotowych wózków i oczywiście następnym celem jest wyprowadzenie przedmiotów z koszyka.