Pracujmy na ekranie zamówień, zanim dodamy nawigację, nie musimy jej
kończyć, ale chcę ją zobaczyć.
Tam importuję React z React, aby móc zbudować prawidłowy komponent React, jak zawsze importować coś z
React Native i że do tego też jesteśmy przyzwyczajeni, prawda?
To nigdy nie jest takie zaskakujące.
Będziemy
potrzebować widoku, prawdopodobnie będziemy potrzebować płaskiej listy, ponieważ potencjalnie będziemy mieli wiele zamówień, nieskończoną kwotę
i chcę móc to renderować, a dzięki temu tutaj możemy zbudować ekran naszych zamówień w ten sposób.
Wyeksportuję to oczywiście, a stylizacja nie powinna być tutaj wymagana, właściwie nie powinniśmy nawet potrzebować widoku, ponieważ
chcę tylko wypisać moją listę zamówień. Więc oczywiście potrzebne nam dane będą pochodzić z
Redux, więc powinniśmy zaimportować
selektor użycia z React Redux, który pozwala nam wejść do sklepu Redux.
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
przypisałem tutaj w połączonych zleceniach reduktorów, to daje nam dostęp do segmentu stanu
zarządzanego przez reduktor zamówień i tam
mamy kolejną właściwość zamówień, która przechowuje rzeczywistą tablicę zamówień.
Więc tutaj muszę uzyskać dostęp do stanu. Zamówienia. zamówienia w końcu,
to daje mi moje zamówienia, które są przechowywane w Redux.
Teraz musimy tylko zwrócić naszą płaską listę, a to otrzyma zamówienia, które powinny
być tablicą, a które są danymi. Od teraz kluczowy ekstraktor nie jest wymagany w nowszych wersjach React
Native, ponieważ każde zamówienie, jeśli spojrzysz na model ma identyfikator, a nowsze wersje React
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
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
razie
po prostu wyślę trochę tekstu, abyśmy szybko mieli coś na ekranie, co możemy
zobaczyć, zanim to poprawimy.
Tutaj może być tekst dla danego elementu, a teraz
spójrzmy na kolejność, tam mamy identyfikator, mamy elementy, które są kolejną listą,
więc najłatwiejszym wyjściem jest po prostu kwota. Więc tutaj przedstawię tylko całkowitą kwotę właściwości,
którą ma tutaj moje zamówienie.
To właśnie wypisuję
na płaskiej liście, teraz mamy podstawowy
ekran zamówień, oczywiście musimy teraz być w stanie to osiągnąć. Przejdźmy więc do nawigatora sklepu i zaimportuj tutaj
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ć
go do tego nawigatora stosów, ponieważ nie jest to częścią tego stos, zamiast tego
chcę
dotrzeć do niego z menu, z menu bocznym.
Musimy więc zbudować nawigator szuflad.
Oczywiście możesz również pracować z kartami, jeśli wolisz, ale chcę tutaj pracować z
szufladą, więc potrzebujemy tego nawigatora szuflad.
Teraz ekran zamówień, choć będzie to jedyny przedmiot, powinien znajdować się na swoim
stosie, abyśmy mieli tam również nagłówek.
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
zamówień, drugi argument tutaj powinien nadal ustawić domyślne opcje nawigacji i użyję te same opcje, co tutaj,
dlatego właściwie wezmę ten obiekt, wytnę go
stąd i zapiszę w osobnej stałej, domyślnej opcji nawigacji, takiej jak ta, jest to
wzorzec, którego już użyłem
w module nawigacyjnym, ponieważ teraz możemy użyć tej stałej tutaj
w nawigatorze produktów do domyślnych opcji nawigacji, a także tutaj w nawigatorze zamówień.
Teraz oczywiście celem jest stworzenie nawigatora szufladowego, który ogólnie nazywam nawigatorem sklepu, ponieważ łączy on
różne funkcje sklepu, które
można powiedzieć za pomocą narzędzia do tworzenia szuflad. Tam chcę teraz połączyć
te dwa stosy, nawigator produktów i nawigator
zamówień, więc potrzebujemy produktów z nawigatorem produktów i zamówień wskazujących na nawigator zamówień,
a więc na tych nawigatorach stosów. Chcę również skonfigurować moje opcje zawartości tam na
szufladzie, to pozwala mi na przykład ustawić kolor odcienia elementów, gdy są one
wybrane, i tam chcę ustawić aktywny kolor odcienia na Kolory. podstawowe, aby były kolorowe kolorem podstawowym, jeśli zostały wybrane.
Teraz należy zwrócić nawigator sklepu. Samo to nie załatwi sprawy, ale to pierwszy
krok, teraz
zanim dodamy przycisk menu, przejdźmy do ekranu zamówień i tam faktycznie dodamy tytuł, więc dodam tam opcje nawigacji, ustawię to
na obiekt, w tej chwili nie potrzebujemy
tutaj opcji dynamicznych, ponieważ
chcę tylko ustawić tytuł nagłówka do twoich zamówień, a teraz, gdy o tym myślę, powinniśmy również
dodać
to na ekranie koszyka,
gdzie jeszcze tego nie robię. Tam też chcę
ustawić to na ekranie koszyka, ustawić to na swoim koszyku.
Tak jest teraz w opcjach nawigacji na
ekranie koszyka, na ekranie zamówień lub ten nawigator jest skonfigurowany. Po tym wszystkim musimy dodać ten przycisk
menu, tę ikonę hamburgera, na przykład na ekranie przeglądu produktów, gdzie chcę móc otworzyć szufladę
i przejść do moich zamówień. Teraz, aby go dodać, przejdźmy do
opcji nawigacji na ekranie przeglądu produktu, który jest już dynamiczny,
co
jest dobre, a następnie oprócz dodania nagłówka bezpośrednio dla tej ikony koszyka, dodajmy
nagłówek Left i nagłówek Left powinny oczywiście zawierać przyciski nagłówka, ale tam , to będą moje elementy menu,
więc nazwałbym to tak i tam, chcę użyć menu md lub menu iOS w zależności od platformy,
na której działamy i
chcę nawigować oczywiście nigdzie, zamiast nawigacji prop tutaj, aby powiedzieć, chcę wywołać szufladę przełączającą, która otworzy
boczną szufladę. Nawiasem mówiąc, ta
sama konfiguracja jest również wymagana na ekranie zamówień, abyśmy mogli opuścić ten ekran.
Tak więc tutaj potrzebujemy tej dynamicznej konfiguracji opcji nawigacji, w której mamy tutaj
funkcję, w której zwracamy nasz obiekt config, abyśmy mogli tam dodać także headerLeft za pomocą
przycisków nagłówka, z naszym menu przełączającym szufladę który opiera się na danych nawigacyjnych
tutaj i oczywiście w tym celu musimy zaimportować przyciski nagłówka, przycisk nagłówka i element, więc na końcu
ekranu przeglądu produktu muszę zaimportować
te rzeczy tutaj, należy dodać te dwie linie do ekranu zamówień.
Więc pozwól, że
go dodam, dodając przyciski nagłówka i import elementu z React nawigacyjnych przycisków nagłówka oraz
import przycisku nagłówka z naszego niestandardowego komponentu. Teraz, jeśli to zapiszemy, powinniśmy mieć tutaj przycisk
menu i tak się dzieje, otwiera szufladę, możemy przejść do zamówień i pojawia się tutaj błąd, ponieważ na
ekranie zamówienia oczywiście używam platformy
Interfejs API, więc powinniśmy go tam zaimportować,
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.
Teraz dodaliśmy szufladę.
Jest jedna rzecz, którą chcę dodać do
szuflady, ale której wcześniej nie robiłem przed kontynuowaniem pracy z listą zamówień, jeszcze nic nie wysyłamy,
ponieważ tak naprawdę nie dodajemy zamówień, nie podłączyliśmy tego przycisk Zamów teraz, nie widzimy jednak
żadnych zmian, jeśli dodamy coś do koszyka, kliknij raz zamówienie teraz,
kliknięcie tego wielokrotnie spowoduje błąd w tej chwili, a następnie zobaczymy
to zamówienie tutaj. Teraz musimy wyczyścić koszyk,
to kolejna rzecz, którą musimy zrobić, ale zanim to zrobimy, w szufladzie faktycznie chcę też
mieć ikony obok moich wpisów, a dodanie tych ikon jest w rzeczywistości bardzo proste, prawda '
Zrobiłem to w module nawigacyjnym, ale zrobimy to teraz. Aby dodać ikony, wystarczy przejść do ekranów, do których
nawigujesz w szufladzie, aw naszym przypadku
są to oczywiście te dwa nawigatory, więc nie są to ekrany, ale te dwa nawigatory
i na tych nawigatorach lub jeśli były to ekrany , na tych ekranach możesz ustawić opcje nawigacji,
a tym samym nie mam na myśli domyślnych opcji nawigacji, które ustawiasz dla wszystkich ekranów tego nawigatora, ale
ustawiasz dla tego nawigatora, jeśli jest on używany w innym nawigatorze, jak ma to miejsce w tym przypadku.
Możemy więc dodać
tutaj opcje nawigacji, ponownie nie zostanie to zastosowane do
ekranów tego nawigatora, ale zamiast tego skonfiguruje
tego nawigatora, jeśli jest to ekran innego nawigatora, a tutaj nawigator zamówień jest ekranem nawigatora
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
jest wywoływana przez nawigację React i daje tę konfigurację szuflady, co najważniejsze,
na przykład, mówi ci jaki jest twój kolor odcienia, ponieważ tutaj możesz teraz zwrócić komponent,
taki jak komponent Ionicons, aby renderować ikonę. W tym celu musisz tylko upewnić się, że
importujesz jony z @
expo / vector-icons, więc musisz dodać ten import do
pliku nawigatora sklepu, a teraz z tym dodanym, jeśli przejdziemy tutaj, zwracam mój Ionicon, teraz mogę go
skonfigurować
tak, jak zawsze to robiłem, i do tego ponownie możemy użyć interfejsu API platformy,
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
on równy Androidowi, to tutaj renderuję md create jako
ikonę, w przeciwnym razie tworzę iOS i to tylko jedna ikona, którą wybrałem wcześniej.
Teraz oczywiście możemy również skonfigurować rozmiar, a ja przykleję się do mojego starego dobrego 23, a ponadto ustaw
kolor, jeśli chcesz, i teraz, oczywiście, nie powinny to być kolory podstawowe, ponieważ
wtedy ta ikona zawsze mają ten kolor, zamiast tego ten kolor powinien być przypisany
przez szufladę, która wie, czy element jest wybrany, czy nie, i który odpowiednio zmieni kolor.
Więc tutaj powinieneś uzyskać dostęp do konfiguracji szuflady. TintColor, a to mówi
ci, jaki kolor powinien mieć w tej chwili, a ten kolor odcienia zmieni się w zależności od tego,
czy jest on aktualnie wybrany, czy nie.
Tak jest w przypadku moich zamówień, przepraszam, ikona tutaj
powinna
być listą MD i listą iOS, a nie tworzyć. To jest teraz moja konfiguracja zamówienia z ikonami listy i oczywiście to
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
ikona koszyka ponownie, a teraz jest to prawie gotowy do użycia. Jedną rzeczą, którą musisz zrobić, to zaimportować React
z React teraz do tego pliku nawigatora, ponieważ teraz używasz
komponentów o tej składni jsx. Jak wiadomo, jsx jest
kompilowany lub konwertowany na React. createElement na końcu, dlatego musisz zaimportować React, aby
ta składnia działała tutaj.
Teraz, gdy wrócisz, masz te ładne ikony obok swoich przedmiotów i są
one również
poprawnie kolorowe, również tutaj na Androidzie.
A więc to już koniec bocznej szuflady, możemy też przejść do ekranu zamówień, a nawet zobaczyć
tam zamówienie.
Jednak w tej chwili koszyk nie jest wyczyszczony, dlatego jeśli klikniesz to kilka
razy, faktycznie pojawi się ostrzeżenie, ponieważ wtedy klikniesz to zbyt szybko, a zatem utworzysz wiele
zamówień z tym samym pseudo unikalnym identyfikatorem, w którym w końcu użyj aktualnego znacznika czasu, jeśli klikniesz to
zbyt szybko kilka razy, to
ten sam znacznik czasu, dlatego właśnie to ostrzeżenie nadchodzi i chciałbym wyczyścić koszyk po złożeniu zamówienia.
Upewnijmy się więc, że wyczyściliśmy koszyk po złożeniu zamówienia, a następnie oczywiście upewnijmy się, że
wysyłamy zamówienia w ładniejszy sposób niż obecnie.