Upewnijmy się więc, że nasze produkty na ekranie przeglądu produktów wyglądają
nieco ładniej niż obecnie. Oczywiście teraz każdy element produktu jest po
prostu renderowany jako tekst, jako komponent tekstowy i nie tego tu chcę, zamiast tego usunę import i utworzę
nowy komponent, który powinien odpowiadać za mój element produktu.
Teraz jedna ważna uwaga dotycząca tego, gdzie tworzymy ten komponent, możemy go utworzyć tutaj
w przeglądzie produktów. Plik js, możemy oczywiście mieć
więcej niż jeden komponent na plik, więc tutaj mogę dodać komponent produktu lub jak chcesz go nazwać, tak jak
ten, wtedy możemy użyć tego komponentu w tym pliku, który jest oczywiście co planuję zrobić.
Jest to wzorzec, którego możesz użyć, jeśli masz komponent, który jest naprawdę silnie powiązany z innym komponentem
i dzielisz go tylko tak, aby każdy komponent był nieco bardziej czytelny.
Gdy te osobne komponenty staną się bardzo duże, powinieneś rozważyć podzielenie ich na osobne pliki,
aby Twoje pliki pozostały małe, a jeśli ludzie chcą spojrzeć na jeden z dwóch
komponentów, nie muszą przewijać drugiego komponentu mogą nie być zainteresowani.
To jedna rzecz, o której należy pamiętać. Oczywiście, jeśli planujesz również użyć komponentu w jeszcze innym
komponencie, zawsze powinieneś przechowywać go w osobnym pliku, nie tylko po to, abyś mógł go wyeksportować jako domyślny, ponieważ możesz go
również wyeksportować, jeśli jest przechowywany razem z innym komponentem, to nie jest
główny powód, ale przede wszystkim, aby wyjaśnić, że jest to samodzielny komponent, który może i będzie używany w
różnych częściach Twojej aplikacji.
Teraz przedmiot produktu nie będzie nie tylko bardzo mały, co samo w sobie byłoby powodem, aby umieścić
go w osobnym pliku, ale użyję go również w innym komponencie później lub w
różnych miejscach aplikacji, nie jest to tylko istotne do ekranu przeglądu produktów i dlatego dodam go
w folderze komponentów iw tym folderze komponentów, aby trochę uporządkować moje komponenty, dodam podfolder
sklepu, w którym chcę umieścić wszystkie komponenty, które są bezpośrednio związane z funkcją sklepu lub
ogólnie z funkcjami mojej aplikacji.
Tam w podfolderze sklepu dodam ten ProductItem. plik js, a zobaczysz, które inne
foldery dodam tutaj później.
Ponownie, wszystkie te wzorce i praktyki, które tu pokazuję, są tylko możliwymi sposobami na to, ogólnie w
moich kursach, a także w tym kursie, pokazuję wszystkie najlepsze praktyki, których możesz użyć, ale często w
programowaniu, nie ma tylko jeden dobry lub
zły sposób, więc praktyki i wzorce, które tu pokazuję, są praktykami i wzorami, które zobaczysz również w
innych projektach, ale możesz także zobaczyć inne struktury folderów, w końcu zawsze możesz pracować ze
strukturą, która działa dla ciebie, nie ma tutaj dobrego ani złego wyboru, chcę jedynie wyjaśnić moje uzasadnienie korzystania z tej
struktury, która, mam nadzieję, pomoże ci zrozumieć, dlaczego go używam i dlaczego warto to przemyśleć.
Więc tutaj plik produktu, ProductItem. Plik js oczywiście będzie zawierał element produktu, który jest normalnym składnikiem funkcjonalnym,
który otrzymuje rekwizyty, a na koniec zwróci kod jsx, a zatem ponieważ zawiera kod
jsx, musimy zaimportować React z React, a tutaj również ja importuj rzeczy z React Native, ponieważ tutaj będę
teraz pracować z tymi prymitywami React Native, aby naprawdę zbudować mój komponent, ponieważ odtąd potrzebuję widoku, potrzebuję tekstu, chcę
również użyć obrazu, ponieważ „ Wyświetlę tutaj obraz produktu, a także
arkusz stylów, ponieważ na pewno też to zrobimy. Dlatego możesz już dodać tutaj stałą stylów, którą
tworzymy za pomocą Arkusza stylów. Utwórz, do którego przekazujemy obiekt
JavaScript, a na koniec domyślnie eksportujemy ten element produktu. Teraz tutaj, w tym komponencie mam na myśli, że
możemy zacząć tworzyć kod jsx stanowiący element produktu i będzie to komponent prezentacyjny, co oznacza,
że nie będzie tu żadnej logiki, nie będziemy zarządzać żadnym stanem wewnętrznym, będzie to po
prostu komponent, którego możemy użyć w innych komponentach, aby uzyskać prawidłową stylizację i układ po
wyjęciu z pudełka, więc ten komponent będzie odpowiedzialny za korzystanie z niektórych komponentów React Native oraz
ich układanie i stylizowanie w określony sposób. Tak więc tutaj w końcu chcę zwrócić
widok, który otacza wszystko, co porządkuje wszystko, co możemy również stylizować, aby
uzyskać wygląd tego wózka z może cieniem, może zaokrąglonymi narożnikami, cokolwiek chcesz i tam, teraz mają
różne części, na przykład na pewno będziemy mieć tam obraz, obraz produktu, chcę też mieć tytuł i
cenę, więc potrzebujemy trochę tekstu tutaj,
więc dla tytułu tu i tutaj, to za cenę w dolarach i niższą, chcę też mieć widok z przyciskami, więc tutaj możemy
w tej chwili użyć
wbudowanego komponentu przycisku, w którym możemy następnie dodać produkt do koszyka lub wyświetlić szczegóły
, więc tam, gdzie mamy te dwie opcje w zasadzie i oczywiście musimy dodać tutaj
procedury obsługi onPress. Więc to jest bardzo podstawowy szkielet, prawdopodobnie
nie ostatni, będziemy musieli zobaczyć, jak możemy tutaj wszystko stylizować, ale taki
jest układ, którego chcę.
Nawiasem mówiąc, zawijam tutaj moje przyciski, ponieważ chcę mieć je obok siebie w rzędzie, a
mając widok wokół nich, możemy stylizować ten widok, tak aby korzystał z rzędu kierunku wygięcia i
tak dalej.
Więc
to jest konfiguracja, z
którą możemy tutaj pracować,
teraz dodajmy trochę stylizacji i do tego chcę
użyć lub zacząć tutaj od otaczającego widoku, w którym konfiguruję taki styl
produktów, dlatego tutaj w arkuszu stylów dodaję taki
produkt, dodaj mój klucz produktu tutaj
i oczywiście teraz, to zależy od ciebie, jak chcesz to stylizować, chcę mieć wygląd tej karty, dlatego dodam cień, kolor cienia,
który może być czarny, krycie cienia która może wynosić 0. 26, przesunięcie cienia, gdzie mam przesunięcie szerokości zero i przesunięcie
wysokości dwa, a promień cienia ośmiu może i jak
zawsze baw się tymi wartościami, aby znaleźć konfigurację.
Teraz możesz pamiętać, że cień działa tylko
na iOS, więc dla Androida dodam tutaj właściwość elewacji i ustawię ją na pięć, może znowu
możesz tam eksperymentować z różnymi wartościami
i chcę mieć promień krawędzi 10, ponieważ Chcę mieć zaokrąglone rogi
i znowu, to jest
coś, czego chcę tutaj, czego nie musisz robić. Dodam też kolor tła biały, aby mieć pewność, że
nasz koszyk tutaj, nasz produkt zawsze ma ten kolor tła, nawet jeśli nasza główna
aplikacja powinna później użyć innego koloru tła. To jest mój produkt, moje opakowanie wokół całego produktu. Dodatkowo chcę tutaj ustawić swoją wysokość,
każdy produkt powinien mieć wysokość 300
pikseli i oczywiście tę wartość można również dostosować do swoich
wymagań.
Możesz oczywiście również uczynić to dynamicznym za pomocą interfejsu API wymiarów, gdy
nauczyłeś się tego w module responsywnym, a ja dodam margines 20 we wszystkich kierunkach wokół każdego
elementu produktu, abyśmy mieli odstępy we wszystkich kierunkach. Dzięki tej konfiguracji możemy rozpocząć pracę nad wyprowadzaniem czegoś, więc
obraz potrzebuje źródła i otrzymamy tutaj obraz sieci, ponieważ jeśli spojrzysz na fikcyjne dane,
wszystkie te adresy URL obrazów są adresami URL, to również my mamy w tym modelu, oczekujemy
tutaj adresu URL,
więc obraz sieciowy, który byłby oczywiście domyślny dla każdego sklepu, który budujesz, ponieważ nigdy
nie umieścisz wszystkich zdjęć produktów w swojej aplikacji, przynajmniej jeśli nie jest to część sklep z aplikacjami do gry, ale
jeśli jest to sklep, w którym
ludzie mogą tworzyć produkty, oczywiście ludzie będą tworzyć produkty dynamicznie po rozpowszechnieniu aplikacji,
więc nie jest możliwe włączenie wszystkich obrazów do aplikacji, zamiast tego muszą być przechowywane na serwerze .
Dlatego tutaj musimy przekazać obiekt do źródła, w którym ustawiliśmy właściwość URI, i który
zostanie teraz odebrany z zewnątrz, ponieważ ten element produktu jest prezentacyjny, więc wszelkie
dane do wyświetlenia muszą zostać przekazane przez rekwizyty i tam można się spodziewać rekwizytu obrazu,
ale tak jak w przypadku wszystkich
rekwizytów we własnych komponentach, możesz wybrać dowolne nazwy. Jeśli chodzi o tytuł, spodziewam się propozycji tytułu, a za cenę
spodziewam się propozycji ceny. Przy okazji zatrzymam tutaj znak dolara, ponieważ cena będzie tylko liczbą i
oczywiście chcę mieć znak dolara przed tym.
A teraz jedna mała uwaga: chcę mieć pewność, że cena, którą otrzymuję, ma zawsze dokładnie dwa miejsca po przecinku i
możemy to osiągnąć, dzwoniąc na to ustalone i przekazując dwa. Naprawiono to funkcja dostępna w liczbach
w Javascripcie, która konwertuje to w zasadzie na ciąg ze stałą liczbą miejsc po
przecinku, a tutaj ograniczam to do dwóch
miejsc po
przecinku, to jest normalny Javascript, nic specyficznego dla React Native. Teraz, kiedy naciśniemy przycisk widoku szczegółów, wywołam rekwizyty przy widoku szczegółów, więc
ponownie używam tutaj nazwy, którą możesz skonfigurować lub nazwać, jak chcesz, ale pomysł jest taki, że rekwizyty
przy widoku szczegółów wskazują na funkcję, która w koniec jest wykonywany
po naciśnięciu tego przycisku, a zatem tutaj, jeśli
ten przycisk, przycisk koszyka, zostanie naciśnięty, wskażę funkcję, którą spodziewam się włączyć na prop dodaniu do koszyka.
Ponownie, możesz nazwać te rekwizyty, jak chcesz, ale kiedy używasz swojego komponentu, musisz
upewnić się, że są dostępne i że otrzymają wartości, które są funkcjami, które są następnie uruchamiane przez te przyciski.
Teraz otrzymujemy wszystkie dane. Teraz dla obrazu, ponieważ
jest to obraz sieciowy, musimy ustawić szerokość i wysokość, ponieważ obraz nie widzi tego z góry, ponieważ
mógłby to zrobić dla obrazu lokalnego, nie może
tego zrobić dla sieci obraz, więc tutaj wskażę style. obraz i na razie dodam ten klucz obrazu do mojego arkusza stylów.
Ponownie, to od Ciebie zależy, jak to stylizujesz, ale ustawię to na szerokość,
powiedzmy
60%, pamiętaj, że ogólny produkt ma szerokość 100%, ale wysokość 60%, ponieważ ogólny produkt przedmiot tutaj ma
wysokość 300 i chcę mieć tam obraz, który powinien również zająć większość wysokości, ale
mam również tytuł i cenę oraz moje guziki i te też powinny
się tam zmieścić,
więc „ Daję obrazowi
60% wysokości, aby inne rzeczy tutaj podzieliły pozostałe 40%. Tak więc, to jest obraz, teraz oczywiście obraz to nie
wszystko, co mamy tutaj, my również mamy nasz tytuł, mamy naszą cenę i
ja też chcę to stylizować.
Więc do tytułu dodam styl tytułu tutaj, a do ceny dodam, powiedzmy styl ceny, a
tutaj dla tych przycisków, dodam również styl do otaczającego widoku i nadam temu nazwę akcje i oczywiście wszystkie
te nazwy stylów, jak zawsze, zależą wyłącznie od Ciebie. Tutaj chcę dodać mój
tytuł oraz cenę i właściwość akcji do mojego arkusza stylów tu i teraz w tytule, możesz
oczywiście stylizować to w dowolny sposób.
Nie mamy tutaj żadnych niestandardowych
czcionek, dodam je wkrótce, ale na razie zignoruję to
i zacznę od rozmiaru czcionki 18 i chcę dodać margines w pionie, więc góra i dół
3 lub 4, więc bardzo mały margines, ale wciąż margines wokół tego tytułu. W tej cenie ustawię rozmiar czcionki na 14,
więc nieco mniejszy, i dam też ten kolor, który powinien być może 888, który
jest podobny do szarawego, ciemnoszarego koloru.
Teraz działania są umieszczane w tym widoku, w którym znajdują się przyciski, i dlatego chcę się upewnić, że
przycisk znajduje się obok siebie, więc w jednym rzędzie.
Podaję więc tutaj kierunek wygięcia wiersza, a także uzasadnię zawartość tak, aby pozostała między nimi pozostała przestrzeń, a
ponadto chcę wyrównać elementy w środku pionowo, więc wzdłuż osi poprzecznej, która dla kierunku
wygięcia rzędu jest osią pionową.
Dzięki temu mamy trochę podstawowej
stylizacji, teraz użyjmy tego komponentu, zanim dopracujemy konfigurację i stylizację. Tak więc komponent pozycji produktu, który
eksportujemy tutaj w pliku pozycji produktu, można teraz wykorzystać w
pliku przeglądu produktu, importując produkt
z tego miejsca, więc wskażmy folder folderów komponentów, tam w podfolderze sklepu, a następnie
pozycję produktu i teraz tego właśnie chcę użyć podczas renderowania moich przedmiotów.
Produkt może być elementem samozamykającym, ponieważ wszystkie dane są odbierane przez rekwizyty, a nie między
tagami otwierającymi i zamykającymi, teraz oczywiście
musimy skonfigurować wszystkie rzeczy, których się tutaj spodziewamy.
Oczekujemy tutaj obrazu, tytułu, ceny i naszych dwóch rekwizytów do obsługi zdarzeń, więc
właśnie to musimy teraz podać.
Stąd tutaj na produkcie, zacznę
od obrazu i oczywiście jest to itemData. pozycja. imageUrl i
zawsze musisz pamiętać, że itemData. item wskazuje jako produkt zgodnie z definicją w naszym modelu produktu,
a zatem będzie miał własność imageUrl zapisaną w ten sposób, jeśli
napisałeś inaczej, oczywiście musisz uzyskać do niego inny dostęp. Oprócz obrazu będziemy mieli
również tytuł itemData. pozycja. tytuł, a poza tym będziemy mieć cenę z
itemData. pozycja. cena,
a następnie mamy tutaj dwie procedury obsługi zdarzeń, ponieważ mamy propozycję szczegółów na widok i
prop dodawania do koszyka, które musimy dodać. Więc na widoku szczegółów zrobi coś później, na razie
jest to po prostu pusta funkcja, a po dodaniu do
koszyka zrobi coś później, na razie może
to być również pusta funkcja, tak powinien wyglądać nasz produkt. Dzięki temu, jeśli uratujemy to, to
powinieneś zobaczyć, nie jest jeszcze idealny, ale my
się tam dostaniemy, nie jest tak naprawdę źle.
Teraz zauważasz oczywiście, że przyciski są niewłaściwie pokolorowane, że ta przestrzeń nie jest tak naprawdę
używana w sposób, w jaki powinna być tam używana, że może również chcemy
wyśrodkować ten tekst, ale są to oczywiście rzeczy możemy popracować. Aby to udoskonalić, wróć tutaj do elementu produktu,
zacznijmy od dwóch tekstów tutaj.
Powinny one oczywiście być wyśrodkowane i można to zrobić w bardzo prosty sposób, zawijając je
w widoku, przenosząc te dwa teksty tam, nadając temu widokowi styl i oczywiście możesz
nazwać to tak,
jak chcesz, nazwiemy wyszczególnia to, ponieważ w pewnym sensie układamy tam
szczegóły produktu, więc dodam tutaj mój styl szczegółów do arkusza stylów i tam po prostu ustawię wyrównywanie elementów na środku.
Wykorzystuje to kierunek wygięcia kolumny, domyślny i dlatego wyśrodkowuje się na osi poprzecznej, zawsze tak robi,
ale oś poprzeczna dla kolumny kierunku wygięcia jest oczywiście
od lewej do prawej, więc centruje się poziomo, co chcę tutaj i ja ' Daję również wysokość 15%.
Pamiętaj, że obraz zajmuje 60%, więc dajemy to może
15%, więc prawie połowa z pozostałych 40%, a nie całkiem
połowa I dodam tutaj trochę dopełnienia 10.
A dla przycisków tutaj, są one w mojej właściwości akcji, tam chcę ustawić
wysokość na pozostałe 25%, to powinien być oczywiście
ciąg, ponieważ mamy tutaj 60% wysokości, a następnie 15%
tutaj, stąd tutaj
Chcę zachować pozostałe 25%, a jeśli teraz to uratujemy, będzie to wyglądać znacznie lepiej.
Teraz trochę dopełnienia po lewej i po prawej stronie byłoby
również przydatne dla przycisków, więc w tej właściwości stylu akcji dodam może dopełnienie w poziomie 20, abyśmy mieli pewne wewnętrzne odstępy po
lewej lub prawej stronie. Teraz, aby zmienić
kolor przycisków, możemy po prostu przejść do składników przycisków, które są
wbudowane w React
Native i ustawić tutaj propozycję koloru na kolory, które należy zaimportować z folderu
constans i
z pliku kolorów i ustawić to następnie do kolorów podstawowych, również tutaj dla drugiego koloru, przycisk Dodaj do koszyka, a zatem drugi przycisk.
Teraz mamy tutaj nasze
przyciski, dodaj do koszyka i wyświetl szczegóły, a to nie wygląda tak źle.
Jedyną rzeczą, którą możesz zauważyć, jest to, że nie mamy tutaj zaokrąglonych rogów
u góry, a to dlatego, że nasz obraz jest w zasadzie jak nakładka na nasze tło, a tło
to widok
otaczający, obraz nie ma zaokrąglone rogi, a zatem nakładają się na nasze
zaokrąglone rogi na otaczającym widoku. Aby to naprawić, możemy
owinąć obraz w osobny widok, a jak wspomniałem wcześniej
w trakcie kursu, w React Native normalne jest posiadanie kilku widoków
zagnieżdżonych, ponieważ do tego widoku możemy teraz dołączyć styl, który możemy podaj identyfikator kontenera obrazu, który możemy teraz dodać do naszego
arkusza stylów, a teraz dam ten kontener mojej szerokości i wysokości tutaj i na obrazie, dlatego po
prostu dodam szerokość i wysokość 100%, ponieważ teraz jest on
wewnątrz
kontener, tutaj odnosi się
to do rodzica,
więc do tego kontenera, więc wysokość 60% zostanie
również zastosowana do obrazu, ale na tym kontenerze
obrazu możemy teraz dodać lewy górny promień obramowania o wartości 10 i górną
krawędź prawidłowy promień 10, aby
zaokrąglić te rogi, a teraz ważne, dodaj przepełnienie ukryte tutaj, ponieważ zapewni to, że każde dziecko, które
jest naszym obrazem, oczywiście nie może nakładać się na to, co tutaj ustawiliśmy.
Teraz dzięki tej konfiguracji dodajemy zaokrąglone rogi tutaj z powrotem na górę, a
teraz są to elementy obrazu, które chcę tutaj i oczywiście jest to także przewijalna lista,
na której widać również, że te obrazy są automatycznie ładowane leniwie, które można kontynuować pracę z.
Oczywiście następnym celem może być to, że możemy również wyświetlić ekran szczegółów.