Zacznijmy od okna dialogowego potwierdzenia tutaj na ekranie edycji produktu. Możemy po prostu zaimportować API alertu z
React Native, co pozwala nam pokazać fajny alert, a następnie dodać tutaj nową metodę, być może wszyscy moglibyśmy zrobić
to w linii, ale mieć nieco bardziej uporządkowany kod, w którym mam swoją funkcję usuwania.
Nawiasem mówiąc, sposób, w jaki nazwiesz swoje funkcje, zależy wyłącznie od ciebie, podoba mi się ten program obsługi, jeśli przypisuję to moim
emiterom zdarzeń w kodzie jsx, żeby tak powiedzieć, i tam możemy wywołać alert. alert, aby pokazać alert z
tytułem Czy
jesteś
pewien, czy naprawdę chcesz usunąć ten element, a następnie
tablicę ze wszystkimi przyciskami, które
chcemy przedstawić, w przypadku gdy przycisk numer jeden ma tekst nie i styl domyślny?
Istnieją tylko trzy style domyślne lub wstępnie skonfigurowane, które można wybierać, i żaden specjalny moduł obsługi
tego pierwszego przycisku.
Drugi przycisk ma tak, tam chcę
mieć styl destrukcyjny, aby to zaznaczyć, bo
hej to coś usunie, a tutaj program obsługi onPress ma w końcu funkcję, która
naprawdę wywoła akcję usuwania.
Więc teraz jest to procedura usuwania, którą chcę uruchomić, kiedy klikamy ten przycisk usuwania i dlatego oczywiście jestem w niewłaściwym
składniku, który właśnie widziałem.
Wytnijmy to,
nie ma go na ekranie
edycji produktu, nie potrzebujemy
importu alertu, mówię o ekranie produktów użytkownika. Tam musimy zaimportować alert, tam powinniśmy
dodać ten moduł obsługi, a teraz tutaj należy przypisać moduł usuwania do tego przycisku
usuwania, więc tutaj możemy po prostu wskazać moduł usuwania, a tę anonimową funkcję można wyciąć
z dołu i można przenieśliśmy się tutaj i zastąpiliśmy ten moduł obsługi onPress dla tego przycisku, a
teraz z tym powinniśmy dostać to okienko wyskakujące, to okno dialogowe potwierdzenia, zanim faktycznie coś usuniemy.
Więc jeśli kliknę na usuń, teraz pytam, jeśli
nacisnę
nie, nic się nie
stanie, tylko jeśli kliknę tak, usuwamy to. Niewielki błąd polega oczywiście na tym,
że potrzebne nam dane produktu
muszą być dostępne.
Więc tutaj przekazujemy identyfikator, który chcemy usunąć, więc tak
naprawdę dla procedury usuwania, potrzebujemy identyfikatora produktu, do którego aplikujemy ten moduł obsługi, aby tutaj był
dostępny ten identyfikator, a to oznacza, że gdy wywoływany jest moduł usuwania tam na
dole musimy upewnić się, że dostanie identyfikator.
Są więc dwa sposoby, aby to zrobić, anonimowa
funkcja, w której ręcznie wykonujemy procedurę usuwania i przekazujemy itemData. pozycja. id lub
alternatywnie, przekazując procedurę usuwania w ten sposób, ale użyj bind, aby wstępnie skonfigurować wszystkie argumenty,
które otrzyma ta funkcja. Bind zawsze potrzebuje wartości dla tego słowa kluczowego w funkcji, którą wykona. Tam możemy po prostu przekazać
to, to nie ma znaczenia, ale drugi
argument jest teraz pierwszym argumentem, który otrzyma procedura usuwania, więc
tutaj przekazujemy itemData. pozycja. ID. Teraz upewniamy się, że
możemy wcisnąć „tak” i zadziała, jeśli teraz wrócimy tutaj do administratora, kliknij usuń, naciśnij „tak”, to teraz naprawdę
działa, a jeśli naciśniemy „nie”, nic się nie dzieje, tak to usuwa.
Więc to jest
pierwsza rzecz i aby upewnić się, że cofniemy się, jeśli to zapiszemy, teraz musimy przejść
do ekranu edycji produktu i tam w naszym module obsługi przesyłania, bez względu na to, czy wysyłamy aktualizację, czy tworzymy
akcję produktu, w koniec Chcę także wywołać nawigację rekwizytów wróć, aby wrócić do poprzedniego ekranu. A jeśli teraz to zapiszemy i przejdziemy do ekranu
administratora, a ja teraz przesyłam pusty produkt, oczywiście otrzymuję ostrzeżenie, ale
to na ogół działa, to wraca i jeśli edytuję produkt, to
również działa.
Teraz skończyliśmy z zarządzaniem wszystkimi danymi wejściowymi, a pozostałą rzeczą, którą
chcę teraz zrobić, zanim naprawdę to wszystko zakończę, jest to, że chcę jeszcze bardziej
zoptymalizować produkt i sposób, w
jaki „ ponowne użycie naszej karty wygląda tutaj z cieniem i tak dalej, ponieważ używamy
tego w
wielu komponentach, a jeśli zauważysz, że używasz czegoś w wielu komponentach, zawsze możesz zastanowić
się, czy możesz to bardziej
zoptymalizować i rzeczywiście tutaj , mamy potencjał optymalizacyjny.
Jak jednak możemy to zoptymalizować?
Cóż, moglibyśmy utworzyć osobny komponent tutaj w naszym folderze interfejsu użytkownika folderu
komponentów, który nazywamy koszykiem. js, gdzie właśnie przechowujemy wygląd tego koszyka. W końcu
element wózka może być bardzo prostym elementem. Importujemy React z React tutaj, ponieważ musimy utworzyć komponent i importujemy widok
z React Native, tak po prostu, a teraz tutaj, tworzymy nasz koszyk, w którym po prostu otrzymujemy nasze rekwizyty, zwracamy trochę
jsx i eksportujemy ten komponent do koniec, chociaż będziemy musieli również skonfigurować stylizację, ponieważ to jest podstawowa
idea tego komponentu, chodzi o
to, aby dać nam kilka wstępnie skonfigurowanych stylów. Dodam więc również moje style na stałe do arkusza
stylów.
utwórz tam i teraz, jaki kod jsx chcę tu zwrócić?
Cóż, to widok, widok, który faktycznie zawinie to, co tam przekazujemy, więc
między tagami mojego komponentu, więc po prostu podpiera tam dzieci, ale
teraz ten widok może uzyskać tutaj domyślną stylizację, którą nazwiję koszykiem i która powinna być
stylami, którymi inaczej kopiuję.
Więc tutaj mój styl koszyka w tym koszyku jest dokładnie tym, co tutaj mam, produktem,
tutaj są
te cienie, wysokość, promień obramowania i kolor tła. Możesz to wszystko wyciąć i przenieść do koszyka
tutaj.
Teraz, aby nadal móc to trochę skonfigurować, w rzeczywistości poprawię to
i ustawię styl na obiekt, w którym scalam wartości z koszyka stylów i wszelkie wartości, które otrzymuję w propozycji stylu, takie jak ten.
Możemy teraz ustawić rekwizyt stylu, gdy korzystamy z naszego koszyka i przekażemy
własne style, które zostaną połączone z tymi domyślnymi stylami kart, ponieważ pozwala mi to
na korzystanie z koszyka tutaj w produkcie na przykład poprzez importowanie koszyka z , a teraz jeden poziom wyżej w folderze interfejsu użytkownika, w pliku koszyka
i zastąp
tutaj ten widok, ten widok
zewnętrzny kartą, a zatem oczywiście również zamień tag zamykający i nadal podaj tutaj moje specyfikacje
produktu, więc ta wysokość i margines .
Zostanie to połączone z innym wyglądem karty i wszystko między tagami
otwierającymi i zamykającymi karty będzie po prostu działać, przekazuję to do mojej
karty tutaj za pomocą rekwizytów dzieci. Teraz to samo dla
przedmiotu zamówienia, musimy tylko zaimportować kartę i teraz przejść do folderu interfejsu użytkownika, aby tutaj kartę,
a następnie użyć karty zamiast tego widoku, ten
widok zewnętrzny tutaj, zastąp go kartą i pozbądź się te style kart
tutaj, cienie, elewacja, promień obramowania i kolor tła i zachowują tylko
style specjalne, w których chcesz się połączyć. A teraz ostatnią rzeczą, ostatnim miejscem, w którym możemy to
wykorzystać, jest ekran koszyka, tam też mam moje podsumowanie, które wykorzystuje te style kart.
Cóż, możemy zaimportować komponent karty z folderu składników, folderu UI
tam i tam, z koszyka. plik js, a teraz użyj komponentu karty zamiast widoku
w miejscu, w
którym chcemy tych stylów kart, więc tutaj byłby widok, który
miał style podsumowania, zastąpię to kartą. A poniżej stylów podsumowania zachowujemy wszystko,
co jest specyficzne dla tego ekranu lub tego komponentu, ale możemy pozbyć się koloru
cienia, promienia cienia, wysokości, koloru tła promienia obramowania, które można wszystko usunąć.
Teraz zapiszmy to, a zobaczysz, że oczywiście aplikacja nadal działa i wygląda
tak samo,
jak wcześniej, jeśli dodam to do koszyka na przykład i zamówię to i przejrzę moje zamówienia,
to wszystko wygląda na tak jak wcześniej, ale teraz robi to z odrobiną bardziej optymalnego kodu, w którym
faktycznie ponownie wykorzystujemy nasze style i mamy dla nich osobny komponent
prezentacyjny, dzięki czemu nasze inne komponenty mogą być nieco szczuplejsze i nie powtarzamy
się jako często przy ustawianiu wyglądu tego koszyka. Kolejną zaletą jest to, że nie możemy pomylić się, jeśli
ustawimy promień cienia na 8 w jednym składniku i 10 w innym, wówczas nasza aplikacja może wyglądać nieco niespójnie.
Unikamy tego, mając pewne komponenty skoncentrowane na stylizacji, które konfigurują te podstawowe style, które następnie używamy w
innych komponentach, gdy robimy to tutaj.