Obecnie w naszym komponencie pozycji produktu, w folderze komponentów, przyciski są częścią tego komponentu, podobnie
jak dotykalny element opakowania.
Nie możemy zmienić tak bardzo dotykalnego komponentu, ponieważ należy on tutaj do naszych treści i nie
jest to również duży problem, ponieważ na ekranie administratora chcę również, aby elementy były
dotykalne, ale chcę przejść do ekranu edycji w tym walizka.
Chcę też mieć dwa przyciski - jeden do edycji,
a drugi do usuwania, ale oczywiście podpisy i czynności powinny być inne.
Teraz możemy przekazać ten tekst podpisu jako rekwizyty i zmienić nazwy rekwizytów, które uruchamiamy po naciśnięciu przycisków w bardziej
ogólny sposób, abyśmy mogli go użyć do przeglądania szczegółów na ekranie przeglądu
produktów oraz do edycji lub usuwania ekran produktu użytkownika. Istnieje również alternatywny sposób radzenia sobie z
tym.
Na przykład, kiedy naciśniemy ogólnie ten komponent, zmienię jego nazwę na on select, aby mieć bardziej ogólną nazwę, która
ma sens w szerszej gamie przypadków użycia, a także zmienię
sposób, w jaki otrzymujemy te przyciski tutaj.
Odetnę je stąd, a zamiast tego wyprowadzę tutaj rekwizyty potomne, które są tym specjalnym rekwizytem, który odnosi się do wszystkiego,
co przekazujemy między otwierającym i zamykającym znacznikiem naszego własnego komponentu. Teraz mogę również pozbyć się importu kolorów tutaj i
importu przycisku, a teraz przejdź do miejsc,
w których używamy produktu,
na przykład na ekranie przeglądu produktów.
Tam musimy teraz zaimportować komponent przycisku i upewnić się, że
zaimportujesz kolory, więc
importuj kolory ze stałych kolorów, a teraz przejdź do produktu i zmień go z komponentu samozamykającego na
komponent, który zamykasz i otwierasz
za pomocą własne znaczniki składników. Pomiędzy tymi tagami możesz teraz ponownie dodać
te dwa przyciski i oczywiście nie używaj rekwizytów w widoku szczegółów i rekwizytów przy dodawaniu do koszyka tutaj, ale zamiast
tego dodaj swoją logikę tutaj, ponieważ teraz dynamicznie przekazujemy to w elemencie produktu,
ale dlatego możemy przekazywać różne przyciski w zależności od
tego, gdzie używamy tego elementu produktu. Więc teraz dodam nowy moduł obsługi, na
przykład wybierz moduł obsługi elementu, który jest po prostu funkcją przechowywaną w stałej takiej jak ta i tam chcę zrobić to, co poprzednio robiłem na
widoku szczegółów, wytnę to i dodam tutaj i
spodziewam się, że dostanę tutaj identyfikator i tytuł jako argument, dzięki czemu będę mógł przesłać tutaj identyfikator
i tytuł tutaj w ten sposób, a teraz wybierz obsługę przedmiotów,
co chcę uruchomić tutaj przy zaznaczaniu, pamiętaj, że zmieniłem nazwę tego w pozycji produktu , ten dotykalny jest teraz uruchamiany
tylko po wybraniu, więc musisz zmienić jego nazwę w miejscach,
w których używasz tego komponentu, tak jak tutaj, a następnie tutaj, wykonuję tutaj moją procedurę obsługi elementów
i przesyłam itemData. pozycja. id i itemData. pozycja. tutaj tytuł, aby
dane te znalazły się w tej funkcji. Robię to, ponieważ teraz mogę użyć tej samej
procedury obsługi elementów tutaj w tym przycisku szczegółów widoku, w zasadzie mogę po prostu skopiować tę anonimową funkcję i dodać
ją tutaj do tej procedury obsługi
tego przycisku onPress, więc teraz używamy jej ponownie i
dodajemy do koszyku, cóż,
wysyłamy to, to jest teraz usuwane tutaj z elementu produktu, ponieważ nie mamy już
tego rekwizytu, zamiast tego jest teraz tutaj, ten rekwizyt, który przyjmuje tę anonimową funkcję, która następnie powinna wywołać
tę akcję.
Więc teraz główna zmiana polega na tym, że przesuwam przyciski poza komponent komponentu pozycji produktu do komponentu
ekranu przeglądu produktów i pozwala nam to robić to samo, co poprzednio, jeśli to zapiszę,
powinno to nadal działać jako przed. Możemy dotknąć elementu, możemy dotknąć wyświetlić
szczegóły, możemy dotknąć, aby koszyk i to wszystko działa, ale teraz
możemy również dostosować to na ekranie produktu użytkownika.
Więc tam też skopiuję te przyciski i przejdę do ekranu produktu użytkownika, a tam, zaimportuję przycisk z React Native, zaimportujemy
nasze kolory na stałe, ponieważ będziemy potrzebować tego dla przycisków ze stałych kolorów, a następnie tutaj w produkcie ,
zamiast konfigurować tę opcję, musimy parsować naszą wybraną prop, gdy element jest ogólnie stuknięty, ale teraz dodajemy również otwierające i zamykające tagi
dla naszego własnego
niestandardowego komponentu i ponownie, dodajemy tutaj nasze przyciski,
ale zamiast wyświetlać szczegóły,
teraz Mówię: edytuj i usuń, a na razie mogę po prostu usunąć całą logikę,
ponieważ na razie nie mamy logiki do edycji i usuwania,
ale możemy to dodać później.
A tutaj dla wybranych, na razie jest to po prostu pusta funkcja.
Ma to tę zaletę, że teraz mamy nasze produkty, jak mieliśmy tutaj wcześniej, ale w sekcji administracyjnej
mamy teraz edycję i usuwanie,
co pozwala nam robić różne rzeczy, wciąż wykorzystując ponownie element produktu, co jest oczywiście
całkiem miłe.