1
00:00:02,330 --> 00:00:03,970
Abyśmy mogli dodać tutaj

2
00:00:03,970 --> 00:00:08,150
nasze elementy, nie jesteśmy w stanie ich usunąć, a to kolejny krok, który

3
00:00:08,190 --> 00:00:10,880
chcę zrobić, następną rzeczą, którą chcę tu wdrożyć.

4
00:00:10,960 --> 00:00:16,420
Mamy naszą FlatList ze wszystkimi tymi celami i byłoby miło, gdybyśmy mogli dotknąć takiego celu,

5
00:00:16,450 --> 00:00:18,010
więc taki element listy,

6
00:00:18,130 --> 00:00:21,960
a kiedy go dotkniemy, po prostu usuwamy go z listy.

7
00:00:21,970 --> 00:00:27,550
Teraz dobrą rzeczą jest to, że możemy jednoznacznie zidentyfikować każdy element, ponieważ każdy element tutaj ma identyfikator,

8
00:00:27,550 --> 00:00:30,590
więc możemy użyć tego identyfikatora i pozbyć się elementu, brak

9
00:00:30,760 --> 00:00:35,240
jest tego, że możemy go dotknąć. Teraz na naszym

10
00:00:35,260 --> 00:00:38,730
własnym komponencie, nie możemy po prostu dodać

11
00:00:38,740 --> 00:00:44,040
onPress ani nic podobnego, to nie zadziała, jeśli konsola loguje

12
00:00:44,050 --> 00:00:46,300
to tutaj, nie zobaczymy

13
00:00:46,300 --> 00:00:49,570
tego dziennika, jak tylko naciśniemy element.

14
00:00:49,570 --> 00:00:55,990
Więc pozwól, że ci to pokażę, jeśli pozwolisz, aby przeładowano tutaj, a następnie ponownie nauczymy się React Native, a

15
00:00:55,990 --> 00:01:02,050
ja to dodam i stukam to tutaj wiele razy, stukam to, nie widzę tu wyników i powoduje to

16
00:01:02,050 --> 00:01:07,990
sens, to jest niestandardowy komponent i onPress byłby teraz po prostu rekwizytem, który przekazujemy do tego komponentu, ten

17
00:01:07,990 --> 00:01:13,420
rekwizyt byłby podłączony do tej funkcji, ale nic nie uruchamia tej rekwizyty z wnętrza komponentu.

18
00:01:14,020 --> 00:01:18,850
Musimy więc przejść do tego komponentu i upewnić się, że ten widok można nacisnąć.

19
00:01:19,030 --> 00:01:24,200
W rzeczywistości widok ma różne rekwizyty, które pomagają nam w słuchaniu wydarzeń,

20
00:01:24,280 --> 00:01:30,190
jeśli wpiszesz tutaj, twoje IDE, jeśli używasz Visual Studio Code, powinno dać ci autouzupełnianie i

21
00:01:30,570 --> 00:01:33,830
widzisz, że jest całkiem sporo zdarzeń, które możesz

22
00:01:33,940 --> 00:01:40,150
słuchaj, na przykład onTouchEnd faktycznie pomaga nam w słuchaniu, kiedy użytkownik w zasadzie dotyka tego i

23
00:01:40,180 --> 00:01:41,450
kończy to.

24
00:01:41,620 --> 00:01:48,340
Problem polega na tym, że onTouchEnd i kilku innych słuchaczy, których tu mamy, jest na zbyt

25
00:01:48,430 --> 00:01:49,300
niskim poziomie.

26
00:01:49,480 --> 00:01:56,020
Możemy tutaj skonfigurować bardzo szczegółowe nasłuchiwanie różnych wydarzeń, ale na przykład onTouchEnd nie mówi nam, jak długo użytkownik

27
00:01:56,020 --> 00:01:57,960
naciskał ten przycisk, a

28
00:01:58,090 --> 00:02:03,640
jeśli kiedykolwiek będziesz musiał dowiedzieć się, czy było to długie czy krótkie naciśnięcie, musisz ręcznie

29
00:02:03,640 --> 00:02:10,090
ustaw licznik czasu, gdy użytkownik zacznie go dotykać przy pomocy onTouchStart, poczekaj na onTouchEnd, a następnie ręcznie zdecyduj,

30
00:02:10,090 --> 00:02:12,480
czy to było wystarczająco długo, czy nie.

31
00:02:12,610 --> 00:02:16,870
Zazwyczaj nie jest to, co chcesz zrobić, ale oczywiście świetnie jest mieć

32
00:02:16,870 --> 00:02:24,100
pełną elastyczność, ale jeśli chcesz te standardowe zdarzenia dotykowe, takie jak długie naciśnięcie, to nie jest to idealne, ponieważ musiałbyś

33
00:02:24,100 --> 00:02:26,770
zrobić wszystko podnosząc samemu, musiałbyś napisać

34
00:02:26,770 --> 00:02:31,390
dużo kodu, aby dowiedzieć się, jaki to był dotyk na własną rękę.

35
00:02:31,390 --> 00:02:34,200
Dobrą rzeczą jest to, że React Native Cię obejmuje.

36
00:02:34,240 --> 00:02:40,660
Istnieje wbudowany dotykalny komponent, który można zaimportować, a dotykalny to komponent, który można owinąć wokół

37
00:02:40,660 --> 00:02:42,670
dowolnego innego komponentu, który

38
00:02:42,760 --> 00:02:49,660
masz, więc wokół dowolnego widoku lub dowolnego tekstu lub cokolwiek masz i nie jest widoczny, nie renderuje

39
00:02:49,660 --> 00:02:56,200
niczego widać na ekranie, ale to zawinie i zarejestruje zdarzenie dotykowe na dziecku, które otaczasz, które

40
00:02:56,200 --> 00:03:03,190
można dotknąć i które można dotknąć, a następnie da ci ukończone zdarzenie dotykowe, więc bardziej szczegółowe zdarzenia

41
00:03:03,190 --> 00:03:09,070
dotykowe, które zostały wstępnie skonfigurowane dla Ciebie. Mówiąc ściślej, dotykalny, taki jak ten, nie może

42
00:03:09,070 --> 00:03:13,900
być używany jako komponent, działa on bardziej jako klasa nadrzędna dla React Native, ponieważ istnieje

43
00:03:13,900 --> 00:03:15,040
wiele konkretnych wersji

44
00:03:15,160 --> 00:03:21,730
dotykalnych, których faktycznie powinieneś użyć, na przykład istnieje nieprzezroczystość dotykowa. Użyjmy nieprzezroczystości dotykowej zamiast dotykowej, ponieważ teraz jest

45
00:03:21,730 --> 00:03:23,980
to naprawdę składnik, którego

46
00:03:23,980 --> 00:03:30,760
można użyć, a teraz tutaj zobaczysz, że jeśli wpiszesz, otrzymasz kilka zdarzeń dotykowych wysokiego poziomu, których

47
00:03:30,760 --> 00:03:34,140
możesz słuchać, takich jak onPress lub onLongPress, i

48
00:03:34,210 --> 00:03:37,120
to jest oczywiście o wiele bardziej pomocne.

49
00:03:37,120 --> 00:03:42,910
Teraz tutaj mogę słuchać onPress, co oznacza, że jest to normalne zdarzenie prasowe, jak moglibyśmy słuchać

50
00:03:42,910 --> 00:03:49,290
na przycisku, a gdy zostanie ono uruchomione, to, co możemy zrobić, możemy oczywiście wykonać dowolny kod i na

51
00:03:49,360 --> 00:03:54,520
przykład, możemy przekazać to dalej powiedzmy rekwizyty. onDelete.

52
00:03:54,520 --> 00:04:00,400
Nazywamy więc funkcję, która została przekazana do tego komponentu na rekwidzie onDelete, nie ustawiamy

53
00:04:00,410 --> 00:04:05,980
teraz tej rekwizyty, ale teraz wywołujemy coś na tej rekwizycie i teraz

54
00:04:05,980 --> 00:04:12,610
możemy przejść do tego miejsca, do aplikacji. js, w którym używamy elementu celu i dodajemy

55
00:04:12,610 --> 00:04:18,820
prop onDelete zamiast onPress, a onDelete powinien teraz wskazywać na funkcję, ponieważ oczekujemy funkcji tutaj w naszym

56
00:04:18,820 --> 00:04:25,030
celu celu, ponieważ onPress oczekuje funkcji, a my po prostu przekazujemy to, co onDelete wskazuje na onPress.

57
00:04:25,840 --> 00:04:32,750
Tak więc onDelete powinien wskazywać na funkcję i działa tylko funkcja, która drukuje. Niemniej jednak jest to co najmniej dobre

58
00:04:32,980 --> 00:04:34,480
do testowania,

59
00:04:34,480 --> 00:04:43,310
więc zobaczmy, czy nauczę się React Native i dodam to i stuknę to tutaj wiele razy, zobaczysz, że otrzymuję

60
00:04:43,310 --> 00:04:49,940
tę informację zwrotną, ten niewielki efekt krycia po naciśnięciu, a jeśli to zrobię, ty zobacz

61
00:04:49,940 --> 00:04:56,070
to tutaj w dzienniku, więc to zadziałało. Widzisz także efekt krycia dotykalnego, co

62
00:04:56,110 --> 00:05:02,560
w rzeczywistości daje nam wizualną informację zwrotną na temat naszego dotyku poprzez zmianę krycia

63
00:05:02,560 --> 00:05:03,600
dotkniętego elementu.

64
00:05:03,610 --> 00:05:10,930
Możesz także kontrolować tę krycie, ustawiając tutaj aktywną propę krycia, na krycie dotykalne i ustawiając na liczbę,

65
00:05:10,930 --> 00:05:13,620
na przykład na. 8, a

66
00:05:13,750 --> 00:05:18,120
teraz będzie to mniej przejrzyste, na przykład po naciśnięciu.

67
00:05:18,130 --> 00:05:23,980
Więc teraz, jeśli nauczyłem się tutaj React Native i nacisnę to, efekt krycia

68
00:05:23,980 --> 00:05:29,860
jest znacznie mniej silny, jak widać. Możesz więc skonfigurować to do swoich potrzeb, a dzięki temu

69
00:05:29,860 --> 00:05:35,980
możesz nie tylko dodać przyjemny efekt, ale oczywiście także posłuchać efektu prasy. Teraz dotykalne krycie nie jest jedynym składnikiem,

70
00:05:35,980 --> 00:05:43,720
którego można użyć, ale oprócz dotykowego krycia masz również dotykowe podświetlenie, więc użyjmy teraz dotykalnego podświetlenia, aby zobaczyć, jak się

71
00:05:43,750 --> 00:05:48,850
to zachowuje, a ogólny pomysł jest taki sam z dotykowym podświetleniem, możesz

72
00:05:48,880 --> 00:05:55,570
także słuchać aby prasować zdarzenia, czyli te wydarzenia na wysokim poziomie, te wstępnie skonfigurowane zdarzenia, ale wizualna

73
00:05:55,570 --> 00:05:57,370
informacja zwrotna będzie inna.

74
00:05:57,460 --> 00:06:01,980
Tutaj nie zmienimy krycia owiniętego elementu, ale kolor tła.

75
00:06:02,020 --> 00:06:06,520
Jeśli teraz nauczę się React Native i kliknę to, zobaczysz teraz,

76
00:06:06,520 --> 00:06:11,830
że kolor tła zmienia się na czarny i, oczywiście, tutaj w tym przypadku

77
00:06:11,830 --> 00:06:17,260
nie jest to pożądany efekt wizualny. Teraz możesz również skonfigurować aktywną nieprzezroczystość, jeśli

78
00:06:17,260 --> 00:06:22,660
chcesz, możesz skonfigurować, które opóźnienie jest zakładane dla długiego naciśnięcia, możesz to zrobić również

79
00:06:22,660 --> 00:06:29,080
przy dotykowym nieprzezroczystości, dzięki czemu możesz skonfigurować ten efekt i możesz po prostu bawić się tym, aby poczuć,

80
00:06:29,080 --> 00:06:30,360
jak go używać.

81
00:06:30,700 --> 00:06:40,240
Oprócz dotykalnego krycia i dotykowego podświetlenia, masz także dotykalne natywne informacje zwrotne, które działają tylko na Androidzie, a na razie nie wiesz, jak sprawdzić, czy to

82
00:06:40,240 --> 00:06:45,150
działa na Androidzie, czy nie, pokażę ci, jak ustalić, która platforma uruchamiasz później,

83
00:06:45,190 --> 00:06:48,550
na razie skorzystajmy z tego i nie będzie można

84
00:06:48,550 --> 00:06:53,980
przetestować tego na symulatorze iPhone'a, ale tutaj na Androidzie, jeśli teraz dodam to, zobaczysz, że

85
00:06:53,980 --> 00:06:58,140
uzyskasz ten efekt tętnienia teraz, jeśli przetestujesz to tutaj i oczywiście

86
00:06:58,140 --> 00:07:04,930
możesz również skonfigurować ten efekt tutaj za pomocą rekwizytów, które możesz ustawić i jak zawsze, oficjalne dokumenty są

87
00:07:05,090 --> 00:07:10,400
również doskonałym miejscem, jeśli chcesz dowiedzieć się więcej o tym, jak to skonfigurować, dzięki

88
00:07:10,400 --> 00:07:11,080
czemu

89
00:07:11,090 --> 00:07:14,360
efekt falowania może bądź też miły na Androida.

90
00:07:14,420 --> 00:07:19,940
I na koniec, jest także dotykalny bez sprzężenia zwrotnego i robi to, co sugeruje

91
00:07:20,000 --> 00:07:25,700
nazwa, pozwala rejestrować te zdarzenia, ale nie daje wizualnego sprzężenia zwrotnego, ponieważ czasami chcesz po

92
00:07:25,700 --> 00:07:31,970
prostu mieć coś, co możesz dotknąć, ale gdzie naprawdę nie nie chcę udzielać użytkownikowi żadnych informacji zwrotnych.

93
00:07:32,240 --> 00:07:34,740
Więc tutaj mogę dotknąć tego tak

94
00:07:34,820 --> 00:07:37,760
bardzo, jak chcę, kran jest zarejestrowany i dlatego

95
00:07:37,760 --> 00:07:44,210
widzę tutaj wynik, ale nie otrzymujemy wizualnej informacji zwrotnej. Tak więc te dotykalne komponenty są naprawdę ważne

96
00:07:44,240 --> 00:07:51,140
w React Native, ponieważ pozwalają na podłączenie normalnych odsłuchów dotykowych wysokiego poziomu, takich jak onPress, onLongPress i tak

97
00:07:51,230 --> 00:07:57,080
dalej do dowolnego komponentu w React Native, a tym samym można zbudować własne dotykalne komponenty,

98
00:07:57,080 --> 00:07:59,980
własne przyciski , własne linki, cokolwiek potrzebujesz.

99
00:07:59,980 --> 00:08:08,800
Teraz wrócę do dotykalnego krycia, ponieważ podoba mi się ten efekt krycia, ale naprawdę, możesz wstrzymać film tutaj i bawić się

100
00:08:08,800 --> 00:08:14,410
z tymi różnymi dotykowymi efektami i bawić się różnymi konfiguracjami, które możesz tam

101
00:08:14,410 --> 00:08:16,490
zastosować, oczywiście „ Będę intensywnie

102
00:08:16,570 --> 00:08:19,990
używać dotykowego przez cały ten kurs, więc zobaczymy

103
00:08:19,990 --> 00:08:26,020
go tam wiele razy, ale jest to również świetne miejsce, aby zacząć z tymi

104
00:08:26,140 --> 00:08:27,940
elementami. Jak powiedziałem,

105
00:08:27,940 --> 00:08:33,040
przejdę tutaj z dotykalnym kryciem, a teraz następnym krokiem jest upewnienie się, że nie tylko

106
00:08:33,040 --> 00:08:36,700
logujemy coś do konsoli, ale że faktycznie usuwamy naciśnięty element.