Dla tego modułu i dla tej
aplikacji, którą tworzymy, ponownie znajdziesz wstępny projekt dołączony do tego wykładu, którego możesz użyć, aby
zacząć z tym, lub możesz samodzielnie stworzyć nową aplikację expo.
Teraz jest to aplikacja, którą załączyłem, bardzo podstawowa aplikacja z twoją aplikacją, której ledwo widzimy, co nie ma znaczenia, ponieważ i
tak nie będziemy przechodzić przez ten tekst i mamy
tylko jedną aplikację. plik js.
Teraz wiele rzeczy, które robię w tym module, to rzeczy, które widziałeś w poprzednich modułach, ponieważ oczywiście jest
to główna idea tutaj.
Przećwiczymy to, czego się nauczyliśmy do tej pory i pojawią się nowe rzeczy lub wzorce,
które również mogą Cię zainteresować.
Teraz oczywiście w tej aplikacji, którą naszkicowałem na ostatnim wykładzie, będziemy mieli kilka ekranów, więc na
pewno potrzebujemy nawigacji, a zatem dodam folder nawigacji, aby móc tam zapisać moją konfigurację nawigacji
i to oczywiście tylko jedna możliwa
konfiguracja, jak wspomniałem wcześniej, możesz pracować z dowolną strukturą
folderów, która Ci odpowiada i która działa dla Ciebie. Oprócz folderu nawigacyjnego chcę również mieć
tutaj
folder ekranów, w tym folderze ekranów chcę również przechowywać ekrany,
między którymi można nawigować, i dodam folder składników dla wszystkich moich zwykłych
składników, oczywiście ekrany są również
React komponenty, ale normalne komponenty, o których tu mówię, to komponenty, których
nie ładujemy bezpośrednio jako ekrany, ale które osadzamy w ekranach zamiast lub w
innych komponentach, więc to będziemy mieli tutaj. Dodam również folder stałych, ponieważ ponownie
będę pracować z moimi stałymi kolorami, aby móc używać wybranych kolorów w całej aplikacji.
Teraz jest wiele różnych sposobów na rozpoczęcie pracy. To, co lubię robić najpierw w moich
aplikacjach, to to, że
zaczynam od ekranów, nawet jeśli nie dodam jeszcze zawartości do wszystkich, lubię dodawać ten ogólny strukturę, dzięki
czemu zawsze mogę zobaczyć, nad czym nadal muszę pracować, których funkcji wciąż brakuje.
Dlatego dodam ekrany, które będę miał w tej aplikacji
i tutaj zrobię coś, czego wcześniej nie robiłem i co jest całkowicie opcjonalne, ale
uporządkuję ekrany w osobne podfoldery.
Będę miał jeden folder z ekranami związanymi ze sklepem
i oczywiście, ponieważ zbudujemy aplikację do zakupów, wszystkie ekrany są związane ze sklepem, ale
tutaj chcę mieć ekrany, które bezpośrednio pomagają nam w oglądaniu naszych produktów, z dodawaniem ich
do
koszyka i tak dalej, a następnie chcę mieć osobny folder i to jest mój folder użytkownika, można powiedzieć, że
chcę mieć ekrany powiązane z
użytkownikiem, aby były to moje produkty użytkownika i produkty administracyjne.
Tak to podzielę, ale
oczywiście możesz to zorganizować tak, jak chcesz.
Na przykład w folderze sklepu chcę mieć ekran przeglądu moich produktów. Będzie to ekran, który zobaczymy, gdy
aplikacja załaduje się tam, gdzie mamy wszystkie produkty do pracy i gdzie możemy następnie
wybrać produkt lub bezpośrednio go dodać do koszyka Będziemy zatem potrzebować również ekranu szczegółów produktu, czyli ekranu, który
widzimy, gdy wybieramy produkt i chcemy dowiedzieć się więcej o nim, a następnie możemy go kliknąć
lub dotknąć i przejść do tego ekranu szczegółów. Będziemy też potrzebować ekranu wózka, co nie jest zaskakujące,
gdy widzimy go, gdy dodamy do koszyka przedmiot lub nie, który następnie widzimy, ale który możemy
odwiedzić,
aby zobaczyć przedmiot, więc
możemy to zrobić, a ja Dodam również ekran zamówień, w którym możemy zobaczyć nasze zamówienia.
Teraz możesz przy okazji argumentować, że ekran koszyka i ekran zamówienia należą do folderu użytkownika, ponieważ
są one w pewnym stopniu wyłączne dla użytkownika, każdy użytkownik ma
swoje własne zamówienia i własny koszyk, a zatem możesz przejść w obie strony, Uważam, że
są nieco bardziej związani ze stroną związaną z produktem sklepowym, ale
znowu, to zależy od ciebie. W folderze użytkownika
chcę mieć ekran moich produktów użytkownika, aby był to ekran, na którym widzę listę wszystkich produktów
należących do tego użytkownika oraz ekran edycji produktu, który jest ekranem, którego użyjemy do dodania nowego produktów
lub do edycji istniejących produktów,
będziemy mogli ich ponownie użyć.
Są to ekrany, nad którymi będziemy
pracować w tym module i nie zapełnimy ich teraz od razu życiem, zamiast tego będziemy pracować nad tym
krok
po kroku, ale tego potrzebujemy.
Oczywiście istnieje również inny folder, który możemy już dodać i jest to folder
sklepu, w którym będziemy zarządzać naszym sklepem Redux i naszym stanem Redux, dlatego jest to nasz system
zarządzania stanem, z którym chcę pracować, z którym oczywiście potrzebujemy, ponieważ mamy wiele ekrany, które muszą
działać na rodzaj powiązanych danych, dlatego musimy zarządzać tymi danymi, naszymi produktami i tym, co jest w koszyku itd.
na pewnym
poziomie globalnym, a Redux jest do tego naprawdę świetny,
więc na pewno będziemy tego potrzebować . Z tego samego powodu musimy również zainstalować niektóre pakiety,
więc uruchomię npm install - zapisz i zainstaluj Redux, a także React Redux. Będziemy także potrzebować React -navigation,
ponieważ oczywiście dodamy ponownie nawigację, abyśmy już mogli tam wrzucić.
Dodam również przyciski React-nawigacja-nagłówek, ponieważ dodam tutaj przyciski nagłówka i chcę mieć te ładnie
stylizowane i pozycjonowane przyciski bez konieczności samodzielnego pozycjonowania stylizacji
i to powinno być na razie.
Więc zainstaluję już wszystkie te pakiety, będziemy potrzebować ich w tym
module, a po zainstalowaniu tych pakietów i utworzeniu tych podstawowych plików, mamy solidną podstawową konfigurację na początek.
Teraz oprócz tych pakietów musimy również zainstalować dwa inne pakiety
za pomocą komendy expo install, a to jest funkcja obsługi-gest-native-gest-handler, więc instalacja expo React-native-gest-handler,
a także pakiet reagujący-native-ożywiony . Oba pakiety należy również zainstalować za
pomocą komendy expo install.
Teraz oczywiście chodzi o wypełnienie tego życiem i tam
chcę zacząć od pierwszego ekranu, który faktycznie pokaże, który jest ekran przeglądu produktów.