Teraz, gdy mamy już podstawowy przepływ informacji, możemy nawigować między naszymi produktami, dodawać je do koszyka, a
następnie także używać koszyka do złożenia zamówienia, a także wyświetlić to zamówienie i oczywiście również
edytować koszyk,
jeśli chcemy, teraz, gdy to wszystko zostało zrobione, czas przejść do ostatniej części tej aplikacji,
która jest oczywiście częścią, w której możesz dodawać nowe produkty.
Teraz jest to także część, którą dopracujemy później, ponieważ później oczywiście głębiej zajmiemy się obsługą danych wejściowych użytkowników, a
nawet przechowamy te dane na serwerze, ale już możemy zacząć tutaj. Na początek ekran produktu użytkownika i
ekran edycji
produktu staną się teraz ważne, ponieważ są to ekrany, na
których widzimy wszystkie nasze produkty i gdzie możemy również edytować produkty.
Zacznijmy od ekranu produktów użytkownika
i zmieńmy go w komponent React, importując React z
React i, co nie jest zaskoczeniem, importując rzeczy z React Native. To, co chcę tutaj zaimportować, to znowu płaska
lista, ponieważ na końcu wypiszę listę produktów na
ekranie produktów użytkownika.
Dlatego tutaj mamy komponent ekranowy produktów użytkownika, który otrzymuje rekwizyty i gdzie
muszę zwrócić trochę jsx, a na dole pliku wyeksportuję ten komponent jako domyślny.
To jest mój domyślny zestaw komponentów, którego używałem w kółko. Teraz chcę wydrukować moje
komponenty, moje produkty z płaską listą i ponownie użyję tego komponentu produktu,
który zbudowaliśmy wcześniej.
Wracając do produktów użytkownika, możemy zaimportować produkt
z folderu komponentów, więc chodźmy tam i tam,
aby robić zakupy, a następnie zamawiać, a nie zamawiać, ale produkt i tutaj,
oczywiście, również przekazywać niektóre dane. Teraz dane, które chcę tutaj przekazać, powinny być
produktami należącymi do mojego zalogowanego użytkownika.
W tej chwili nie mamy zalogowanego użytkownika, ale jeśli pamiętasz reduktor produktów, to oszukujemy,
że mamy, ponieważ mamy tablicę produktów użytkownika, która przechowuje wszystkie produkty, które w tym przypadku
mają identyfikator użytkownika, identyfikator właściciela z U1 i zakładam na chwilę, że mamy pewne fikcyjne dane, że są to nasze aktualnie
zalogowane dane użytkownika, później będzie to oczywiście dynamiczne. Tak więc potrzebujemy produktu użytkownika, z
powrotem na ekranie produktów użytkownika, dlatego musimy uzyskać te dane z
Redux za pomocą selektora użycia z React Redux, w ten sposób i
tutaj otrzymujemy nasze produkty użytkownika, dzwoniąc do selektora użycia, w którym przechodzimy w tej funkcji uzyskuje stan, a następnie dociera do
części produktowej naszych produktów sklepowych, ponieważ to jest identyfikator, którego tam używam, a
następnie, jak właśnie powiedziałem, uzyskaj dostęp do tego pola produktów użytkownika tutaj, więc na ekranie
produktu użytkownika, tutaj dostęp. produkty użytkownika. Produkty użytkownika są teraz tablicą,
którą wprowadzamy do danych, jak zawsze tutaj dodam ekstraktor kluczy, który daje mi identyfikator, ponieważ mój produkt przechowywany tutaj
w produktach użytkownika używa oczywiście mojego modelu produktu, a zatem ma identyfikator,
który jest unikalny identyfikator, którego mogę użyć, więc go użyję, a potem oczywiście, jak zawsze,
również musimy dodać element renderujący, oczywiście znasz już ten wzór. Renderuj przedmiot pobiera tutaj dane produktu i chcę zwrócić nowy
produkt dla każdego wpisu tutaj, a przedmiot produktu, jeśli przyjrzymy się temu, wymaga kilku informacji.
Pobiera tutaj szczegółową propozycję widoku, bierze prop, tytułową, propozycję cenową, propozycję graficzną, a następnie prop dodaną do
koszyka.
Teraz możesz już zauważyć, że nie wszystkie te rekwizyty naprawdę pasują do naszego celu, jeśli
użyjemy tego na ekranie produktu użytkownika, ponieważ nie będzie to ekran, na którym można kupować produkty, to nie
jest ekran, na którym chcę móc dodać produkty do koszyka. Chcę je wydrukować tak jak tutaj z obrazem, ceną itd., Ale
nie dbam tak bardzo o to, czy możemy je kliknąć, czy o te przyciski. Zacznę więc dodawać produkt w
ten sposób, ale będziemy musieli go dostroić.
Potrzebujemy więc tytułu, ceny, obrazu i szczegółów widoku oraz koszyka.
Potrzebujemy więc obrazu tutaj i oczywiście jest to itemData. pozycja. imageUrl, ponieważ nie
możesz zapomnieć o tym itemData. item w punktach końcowych produktu zdefiniowanego
tutaj w modelu, stąd będziemy mieli tę właściwość imageUrl, a następnie tutaj potrzebujemy również tytułu, który jest dostępny
poprzez itemData. pozycja. tytuł. Potrzebujemy ceny, która jest dostępna w itemData. pozycja. cena i jeśli spojrzymy
na element produktu, który spełnia wszystko, czego potrzebujemy tutaj, ale teraz musimy zobaczyć
szczegóły na temat i dodać do koszyka, a ja dodam je tymczasowo, ale tutaj musimy znaleźć inne
rozwiązanie.
Tak więc w widoku szczegółów jest
obecnie pusta funkcja, a przy dodawaniu do koszyka również funkcja pusta, a my zaimplementujemy to później.
Na razie jednak wysyłam tutaj element produktu i dlatego możemy
teraz przejść do ekranu produktów użytkownika. Aby się tam dostać, czas wrócić do nawigatora sklepu, a na
koniec chcę dodać je do nawigatora szuflad, ale jako osobny stos, podobnie jak produkty i zamówienia to osobny
stos, powinien to być również osobny stos .
Możemy po prostu skopiować tutaj stos nawigatora zamówień, replikować go i zaimportować tutaj ekran produktu użytkownika, więc
ekran produktów użytkownika z folderu ekranów, tam z folderu użytkownika, a następnie ekran produktu użytkownika i zmapuj to
w nowo skopiowanym stosie, który tam Nie będę nazywał nawigatora zamówień, ponieważ mam już tę nazwę,
ale nadam jej nazwę, powiedzmy, że może to administrator nawigatora, a tutaj mam identyfikator
produktów użytkownika, który wskazuje na ekranie produktów użytkownika. Teraz tutaj jako ikona, w szufladzie
chcę mieć md create i ios create icon i poza tym, powinno być dobrze.
Teraz musimy tylko dodać ten nawigator do naszego nawigatora szufladowego.
Tam dodam klucz administratora i wskażę na nawigatorze administratora, więc teraz powinniśmy
być w stanie go osiągnąć. Jeśli wrócimy do aplikacji, mamy wpis
administratora i jeśli go kliknę, otrzymamy problem dotyczący moich produktów użytkownika,
stan niezdefiniowany nie jest obiektem, rzućmy okiem na ekran produktu użytkownika, tak, to
powinno bądź produktami, ponieważ nasz plasterek jest tutaj nazywany produktami w kombinacji reduktorów.
Więc tutaj powinny też
być produkty, mała literówka z mojej strony. Teraz wygląda to lepiej i teraz może wyglądać, jakby nic się
nie zmieniło, ale w rzeczywistości widać, że moje elementy nawigacji zniknęły, ponieważ teraz jestem na nowym ekranie, ale mam tutaj moją starą
listę, ale z mniejszą liczbą produktów.
Jeśli porównasz Androida, gdzie jestem na ekranie startowym, mamy tam więcej produktów, teraz
mam tylko te, w których U1 jest identyfikatorem właściciela.
To
dobrze, ale oczywiście nie lubię tych przycisków tutaj
i chcę też mieć tutaj pozycję menu i oczywiście nagłówek.
Jest kilka rzeczy, które musimy naprawić, te przyciski są oczywiście najważniejsze lub
najbardziej uderzające, co jest złe. Zacznę od nagłówka,
tutaj na ekranie produktów użytkownika
możemy dodać opcje nawigacji, ekran produktów użytkownika. opcje nawigacji i tam, na przykład, ustaw tytuł
nagłówka swoich produktów, a my potrzebujemy również przycisku menu, abyśmy mogli faktycznie przejść do ekranu przeglądu produktu, a stamtąd
skopiować ten nagłówek po lewej stronie, wrócić do ekranu produktu
użytkownika i dodaj to tutaj.
Teraz jednak potrzebujemy tej formy funkcji opcji nawigacji, w której następnie zwracamy obiekt
ze wszystkimi dostępnymi opcjami, więc musimy to zmienić w ten sposób, a także
musimy upewnić się, że importujemy element przycisków nagłówka i przycisk nagłówka.
Wracając do ekranu przeglądu produktu, mam tutaj te importy, skopiuj
je z ekranu przeglądu produktu, przejdź do
ekranu produktu użytkownika i dodaj je
w ten sposób, na przykład, aby zaimportować
wszystko, czego potrzebujesz.
Musimy również zaimportować interfejs API platformy, ponieważ używamy go również podczas konfigurowania przycisków nagłówka.
Przynajmniej teraz, gdy wchodzimy do obszaru administracyjnego, mamy tutaj tytuł, znów mamy szufladę, przycisk menu,
ale
co z tymi przyciskami tutaj?
Będziemy musieli zmienić wygląd naszego produktu.