Przejdę więc do ekranu przeglądu produktu, ponieważ zanim dodam nawigatora,
chcę przynajmniej móc coś
zobaczyć na tym ekranie, dlatego tutaj musimy teraz zaimportować selektor użycia z React Redux, ponieważ pozwoli nam to
wejdź do sklepu Redux i stamtąd zdobądź nasze produkty.
Więc w końcu możemy uzyskać nasze produkty i przechowywać je w stałych produktach, wywołując
selektor use, a jak dowiedziałeś
się w poprzednim module o zarządzaniu stanem w Redux, selektor use przyjmuje funkcję, która
automatycznie odbiera stan , stan Redux jako dane wejściowe, które następnie zwracają wszelkie dane, które chcesz tam
i tam
w stanie Redux, chcę
wykorzystać kawałek moich produktów i musisz użyć nazwy używanej tutaj w połączonych reduktorach, aby to
uzyskać stan, dane zarządzane za pomocą produktów dla użytkownika.
Więc tutaj powiem produkty stanowe, a teraz w tym fragmencie naszego stanu chcę uzyskać dostępne
produkty, więc zdobądźmy. dostępne produkty tutaj i jest
to ta składnia funkcji krótkiej strzałki, w której część po prawej stronie strzałki
jest automatycznie zwracana.
To właśnie jest teraz przechowywane w produktach i dlatego tutaj, na
płaskiej liście, możemy oczywiście ustawić rekwizyt danych równy naszym produktom tutaj, które wybraliśmy, ponieważ będzie to
tablica i dokładnie tego potrzebują dane.
Dodam tutaj również ekstraktor kluczy, w zależności od używanej wersji React Native, nie będzie
to potrzebne, ponieważ każdy produkt w naszej aplikacji ma identyfikator, a nowsze wersje płaskiej listy również szukają identyfikatora, a
nie tylko klucz, ale jeśli pracujesz ze starszą wersją, musisz skonfigurować tę funkcję wyodrębniania klucza, a ta pobiera
funkcję, która daje przedmiot, na który
patrzy, i musisz powiedzieć, jaki powinien być twój unikalny klucz przedmiot
i oczywiście to przedmiot. id, znowu, nowsze
wersje React Native tego nie potrzebują. Teraz musimy również dostarczyć rekwizyt elementu
renderującego, który wskazuje na funkcję, która renderuje nasze różne elementy listy, i tutaj zacznę
proste i dopracujemy to później, a na razie zaimportuję komponent tekstowy z React
Native i wypisz tytuł produktu w komponencie tekstowym.
Więc tutaj otrzymujemy nasze dane pozycji, a wartość zwracana przez tę funkcję, którą musimy dostarczyć,
aby renderować pozycję, powinna zwrócić
element jsx na końcu.
Więc tutaj zwrócę element tekstowy, a tam wyjdę itemData. pozycja. tytuł i mogę to zrobić, ponieważ
dane produktu są odbierane przez React Native, to ma prop dla przedmiotu, to także coś, co
daje React Native, a każdy przedmiot tutaj jest oczywiście tylko jednym przedmiotem
w naszych produktach, dlatego jest tego typu danych i dlatego ma oczywiście tytuł prop, ponieważ to
właśnie tutaj
przypisuję, więc będziemy mieli tutaj propozycję tytułu, którą mogę wygenerować i oczywiście nie jest to
końcowa forma tego, jak produkt powinien wyglądać w lista, ale to jest to,
czego używam, aby zacząć, aby zobaczyć coś na ekranie. Mówiąc o ekranie, oczywiście jest czas na skonfigurowanie nawigatora,
abyśmy naprawdę mogli zobaczyć coś na ekranie i że mamy ekrany.
Stąd tutaj w folderze nawigacyjnym dodam mojego ShopNavigator. plik js i tam dodamy kilka nawigacji
w tym module, więc na pewno będziemy musieli zaimportować z nawigacji React i oczywiście zacznę od zwykłego
nawigatora stosu, który możemy utworzyć za pomocą utwórz funkcję nawigatora stosu, a następnie
po prostu utworzymy ją tutaj, a ja nazwiebym ją nawigatorem produktów, to właśnie
tutaj przechowuję, wynik
utworzenia
nawigatora stosu, a wynikiem jest komponent React, jeśli pamiętasz i jeśli pamiętasz
, tworzenie nawigatora stosu przyjmuje obiekt JavaScript jako pierwszy argument, w którym mapujemy identyfikatory
ekranu na komponenty React, które powinny być ładowane jako ekrany.
Więc tutaj oczywiście zacznę od ekranu przeglądu produktów i importuję to z folderu ekranów
i tam z części sklepu i tam z pliku ekranu przeglądu produktów, a zatem pierwszą rzeczą,
którą chcę zmapować w
tym nawigatorze stosów, są produkty przegląd lub jak chcesz to nazwać, który jest mapowany na ekran
przeglądu produktów.
Teraz oczywiście dla tego nawigatora stosu, który ostatecznie będzie miał wiele ekranów, przekażę również drugi argument,
aby utworzyć nawigator stosu, który jest obiektem, który pozwala nam skonfigurować cały
nawigator i tam możemy na przykład skonfigurować domyślne opcje nawigacji dla na każdym
ekranie chcę ustawić kolor tła nagłówka i tak dalej.
Więc tutaj ustawię obiekt JavaScript, w którym mogę ustawić styl nagłówka na inny obiekt JavaScript, w którym możemy ustawić kolor
tła na dowolny wybrany przez Ciebie kolor, i to właśnie tutaj wejdzie
do gry folder stałych, do którego dodam kolory. plik js, w którym po prostu chcę
wyeksportować domyślny obiekt JavaScript z kolorem podstawowym i kolorem akcentującym i możesz nazwać te klawisze, jak chcesz,
a teraz wybrałem kilka fajnych
kolorów, których chcę tutaj użyć, ale możesz użyć dowolnego koloru chcieć.
Moim podstawowym kolorem będzie kod szesnastkowy # c2185b, a kolor akcentowy ma
kod szesnastkowy # ffc107.
Dlatego teraz z powrotem w nawigatorze sklepu możemy importować z tego folderu stałych, nadal
z kolorów, które znajdujemy w takim folderze stałych, a następnie tutaj, kolor tła, który ustawię dla
stylu nagłówka, to kolory. podstawowy.
Po dodaniu tego dodam również
kolor odcienia nagłówka, który na przykład zabarwi tekst tytułowy, i ustawię go na biały,
ponieważ ten podstawowy kolor, który ustawiłem, jest dość mocny różowo-czerwonawy, a zatem biały jest kolor, którego
powinniśmy użyć, aby był dobrze czytelny i naprawdę chcę się różnić co do wyglądu nagłówka
w zależności od platformy, na której działamy.
Czas więc zaimportować platformę z React Native i jedną notatkę tutaj, w tej praktycznej aplikacji nie skupię
się zbytnio na różnicach między platformami i responsywnym projekcie, zrobię to do
pewnego stopnia, aby istniała podstawowa różnica między na różnych platformach i że aplikacja
wygląda dobrze na różnych rozmiarach urządzeń, ale
nie przetestuję jej na wielu różnych rozmiarach urządzeń.
Nauczyłeś się wszystkiego, czego potrzebujesz, aby uczynić go tak responsywnym, jak
to możliwe, więc zdecydowanie możesz zawsze modyfikować to bardziej niż ja tutaj w tym module.
Na koniec chcę się tylko upewnić, że ten moduł nie zajmie setek
godzin, dlatego ograniczę to do minimum.
Przy takim zestawie platforma wydaje mi się ważna, ponieważ naprawdę chcę inaczej wyglądać nagłówek
w zależności od tego, czy korzystamy z systemu iOS, czy Android.
Kolor tła nie jest właściwie zawsze kolorem podstawowym, ale zamiast tego ustawię to tylko, jeśli system
operacyjny, na którym działamy, to Android, w przeciwnym razie
ustawię kolor tła na pusty ciąg znaków, co oznacza, że zostanie przyjęty domyślny i dlatego
w przypadku koloru
odcienia nagłówka kolor ten powinien
być również biały, jeśli korzystamy z systemu Android, w przeciwnym razie nie ustawię go na pusty ciąg, ale zamiast
tego chcę użyć koloru podstawowego jako koloru tekstu
w systemie iOS, więc jeśli nie mamy Androida. Dzięki temu konfigurator nawigatora produktów jest skonfigurowany.
Teraz, jak nauczyłeś się w module nawigacyjnym, nie eksportujesz tego nawigatora, ale
umieszczasz go w kontenerze aplikacji, który tworzysz za pomocą funkcji tworzenia kontenera aplikacji
uzyskanej z nawigacji React.
Więc tutaj możemy teraz wyeksportować domyślny kontener aplikacji i przekazać nawigator produktów, tak jak to.
To jest teraz skonfigurowana nawigacja eksportu i tego możemy teraz
używać w aplikacji. js.
Więc w aplikacji. js, możemy teraz zaimportować naszego nawigatora
sklepu z nawigacji, nawigatora sklepu i właśnie tego używam tutaj w tagach mojego dostawcy,
więc nawigator sklepu jest taki. Oznacza to również, że możemy pozbyć się importów React Native,
ponieważ nie używamy już żadnego z tych komponentów React Native w tym komponencie. Przy całej tej pracy powinniśmy być
teraz w stanie uruchomić naszą aplikację i, miejmy nadzieję, wylądować na ekranie przeglądu
produktów, na którym widzimy podstawową, niestylizowaną listę tytułów produktów.
Więc jeśli teraz to zapiszę, zapisz wszystkie te zmiany i upewnisz się, że masz
npm zacząć działać i masz emulatory
działające tam, gdzie to załadowałeś, otrzymuję błąd, że obiekt nie jest konstruktorem, oceniając domyślny nowy produkt.
Problem powinien polegać na tym, że w folderze mojego modelu zapomniałem domyślnie wyeksportować klasę produktu.
To oczywiście musi zostać dodane
tutaj, w przeciwnym razie nie można importować z
tego pliku, ma sens.
Więc teraz to działa i
teraz rzeczywiście widzę moje tytuły produktów.
Widzimy także różne nagłówki,
nie widzimy nagłówka, ponieważ go nie dodałem. Dlatego na ekranie przeglądu produktów
możemy oczywiście dodać nasz specjalny ekran tylko opcje nawigacji, które zostaną połączone z
domyślnymi opcjami nawigacji, które ustawiliśmy bezpośrednio w nawigatorze za pomocą ekranu przeglądu produktów, nasza stała
tutaj, która przechowuje nasz komponent i dodaje właściwość opcji nawigacji i tutaj
możemy w tej chwili użyć statycznych opcji nawigacji, dodać tytuł nagłówka i ustawić go na przykład dla
wszystkich produktów, a
jeśli teraz to zapiszemy, zobaczymy wszystkie produkty tutaj w nagłówku.
Teraz wygląda to całkiem przyzwoicie, możemy zobaczyć nasze produkty.
Oczywiście te produkty nie wyglądają tak, jak powinny, więc
następnym krokiem będzie upewnienie się, że tutaj rzeczywiście uzyskamy wygląd, którego potrzebujemy w tej aplikacji.