1
00:00:02,120 --> 00:00:08,560
Obecnie w naszym komponencie pozycji produktu, w folderze komponentów, przyciski są częścią tego komponentu, podobnie

2
00:00:08,580 --> 00:00:10,660
jak dotykalny element opakowania.

3
00:00:12,480 --> 00:00:18,990
Nie możemy zmienić tak bardzo dotykalnego komponentu, ponieważ należy on tutaj do naszych treści i nie

4
00:00:18,990 --> 00:00:25,200
jest to również duży problem, ponieważ na ekranie administratora chcę również, aby elementy były

5
00:00:25,590 --> 00:00:30,210
dotykalne, ale chcę przejść do ekranu edycji w tym walizka.

6
00:00:30,360 --> 00:00:33,530
Chcę też mieć dwa przyciski - jeden do edycji,

7
00:00:33,540 --> 00:00:37,710
a drugi do usuwania, ale oczywiście podpisy i czynności powinny być inne.

8
00:00:38,370 --> 00:00:46,150
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

9
00:00:46,150 --> 00:00:50,880
ogólny sposób, abyśmy mogli go użyć do przeglądania szczegółów na ekranie przeglądu

10
00:00:50,920 --> 00:00:59,500
produktów oraz do edycji lub usuwania ekran produktu użytkownika. Istnieje również alternatywny sposób radzenia sobie z

11
00:00:59,500 --> 00:01:00,320
tym.

12
00:01:00,370 --> 00:01:07,720
Na przykład, kiedy naciśniemy ogólnie ten komponent, zmienię jego nazwę na on select, aby mieć bardziej ogólną nazwę, która

13
00:01:07,720 --> 00:01:12,000
ma sens w szerszej gamie przypadków użycia, a także zmienię

14
00:01:12,770 --> 00:01:15,810
sposób, w jaki otrzymujemy te przyciski tutaj.

15
00:01:15,890 --> 00:01:22,310
Odetnę je stąd, a zamiast tego wyprowadzę tutaj rekwizyty potomne, które są tym specjalnym rekwizytem, który odnosi się do wszystkiego,

16
00:01:22,310 --> 00:01:29,560
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

17
00:01:29,560 --> 00:01:32,540
importu przycisku, a teraz przejdź do miejsc,

18
00:01:32,830 --> 00:01:35,180
w których używamy produktu,

19
00:01:35,230 --> 00:01:38,010
na przykład na ekranie przeglądu produktów.

20
00:01:38,290 --> 00:01:44,100
Tam musimy teraz zaimportować komponent przycisku i upewnić się, że

21
00:01:44,110 --> 00:01:46,150
zaimportujesz kolory, więc

22
00:01:48,490 --> 00:01:57,630
importuj kolory ze stałych kolorów, a teraz przejdź do produktu i zmień go z komponentu samozamykającego na

23
00:01:57,630 --> 00:02:00,450
komponent, który zamykasz i otwierasz

24
00:02:00,450 --> 00:02:06,090
za pomocą własne znaczniki składników. Pomiędzy tymi tagami możesz teraz ponownie dodać

25
00:02:06,090 --> 00:02:13,680
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

26
00:02:13,680 --> 00:02:18,690
tego dodaj swoją logikę tutaj, ponieważ teraz dynamicznie przekazujemy to w elemencie produktu,

27
00:02:18,690 --> 00:02:21,950
ale dlatego możemy przekazywać różne przyciski w zależności od

28
00:02:21,960 --> 00:02:26,970
tego, gdzie używamy tego elementu produktu. Więc teraz dodam nowy moduł obsługi, na

29
00:02:29,840 --> 00:02:39,030
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

30
00:02:39,140 --> 00:02:42,280
widoku szczegółów, wytnę to i dodam tutaj i

31
00:02:42,350 --> 00:02:48,440
spodziewam się, że dostanę tutaj identyfikator i tytuł jako argument, dzięki czemu będę mógł przesłać tutaj identyfikator

32
00:02:48,440 --> 00:02:52,350
i tytuł tutaj w ten sposób, a teraz wybierz obsługę przedmiotów,

33
00:02:52,610 --> 00:02:59,860
co chcę uruchomić tutaj przy zaznaczaniu, pamiętaj, że zmieniłem nazwę tego w pozycji produktu , ten dotykalny jest teraz uruchamiany

34
00:02:59,870 --> 00:03:03,590
tylko po wybraniu, więc musisz zmienić jego nazwę w miejscach,

35
00:03:03,590 --> 00:03:09,770
w których używasz tego komponentu, tak jak tutaj, a następnie tutaj, wykonuję tutaj moją procedurę obsługi elementów

36
00:03:09,770 --> 00:03:17,360
i przesyłam itemData. pozycja. id i itemData. pozycja. tutaj tytuł, aby

37
00:03:17,360 --> 00:03:23,690
dane te znalazły się w tej funkcji. Robię to, ponieważ teraz mogę użyć tej samej

38
00:03:23,690 --> 00:03:31,760
procedury obsługi elementów tutaj w tym przycisku szczegółów widoku, w zasadzie mogę po prostu skopiować tę anonimową funkcję i dodać

39
00:03:31,760 --> 00:03:34,560
ją tutaj do tej procedury obsługi

40
00:03:34,610 --> 00:03:37,970
tego przycisku onPress, więc teraz używamy jej ponownie i

41
00:03:38,060 --> 00:03:39,740
dodajemy do koszyku, cóż,

42
00:03:39,890 --> 00:03:45,320
wysyłamy to, to jest teraz usuwane tutaj z elementu produktu, ponieważ nie mamy już

43
00:03:45,320 --> 00:03:52,340
tego rekwizytu, zamiast tego jest teraz tutaj, ten rekwizyt, który przyjmuje tę anonimową funkcję, która następnie powinna wywołać

44
00:03:52,340 --> 00:03:53,510
tę akcję.

45
00:03:53,900 --> 00:04:00,170
Więc teraz główna zmiana polega na tym, że przesuwam przyciski poza komponent komponentu pozycji produktu do komponentu

46
00:04:00,170 --> 00:04:05,930
ekranu przeglądu produktów i pozwala nam to robić to samo, co poprzednio, jeśli to zapiszę,

47
00:04:05,930 --> 00:04:11,330
powinno to nadal działać jako przed. Możemy dotknąć elementu, możemy dotknąć wyświetlić

48
00:04:11,330 --> 00:04:15,420
szczegóły, możemy dotknąć, aby koszyk i to wszystko działa, ale teraz

49
00:04:15,740 --> 00:04:18,890
możemy również dostosować to na ekranie produktu użytkownika.

50
00:04:19,250 --> 00:04:28,410
Więc tam też skopiuję te przyciski i przejdę do ekranu produktu użytkownika, a tam, zaimportuję przycisk z React Native, zaimportujemy

51
00:04:28,470 --> 00:04:36,870
nasze kolory na stałe, ponieważ będziemy potrzebować tego dla przycisków ze stałych kolorów, a następnie tutaj w produkcie ,

52
00:04:37,320 --> 00:04:47,480
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

53
00:04:47,480 --> 00:04:49,450
dla naszego własnego

54
00:04:49,550 --> 00:04:53,240
niestandardowego komponentu i ponownie, dodajemy tutaj nasze przyciski,

55
00:04:53,240 --> 00:04:55,380
ale zamiast wyświetlać szczegóły,

56
00:04:55,490 --> 00:05:01,940
teraz Mówię: edytuj i usuń, a na razie mogę po prostu usunąć całą logikę,

57
00:05:02,060 --> 00:05:06,380
ponieważ na razie nie mamy logiki do edycji i usuwania,

58
00:05:06,380 --> 00:05:08,630
ale możemy to dodać później.

59
00:05:08,870 --> 00:05:13,630
A tutaj dla wybranych, na razie jest to po prostu pusta funkcja.

60
00:05:13,780 --> 00:05:19,690
Ma to tę zaletę, że teraz mamy nasze produkty, jak mieliśmy tutaj wcześniej, ale w sekcji administracyjnej

61
00:05:19,690 --> 00:05:21,430
mamy teraz edycję i usuwanie,

62
00:05:21,550 --> 00:05:26,290
co pozwala nam robić różne rzeczy, wciąż wykorzystując ponownie element produktu, co jest oczywiście

63
00:05:26,290 --> 00:05:27,330
całkiem miłe.