Abyśmy mogli dodać tutaj
nasze elementy, nie jesteśmy w stanie ich usunąć, a to kolejny krok, który
chcę zrobić, następną rzeczą, którą chcę tu wdrożyć.
Mamy naszą FlatList ze wszystkimi tymi celami i byłoby miło, gdybyśmy mogli dotknąć takiego celu,
więc taki element listy,
a kiedy go dotkniemy, po prostu usuwamy go z listy.
Teraz dobrą rzeczą jest to, że możemy jednoznacznie zidentyfikować każdy element, ponieważ każdy element tutaj ma identyfikator,
więc możemy użyć tego identyfikatora i pozbyć się elementu, brak
jest tego, że możemy go dotknąć. Teraz na naszym
własnym komponencie, nie możemy po prostu dodać
onPress ani nic podobnego, to nie zadziała, jeśli konsola loguje
to tutaj, nie zobaczymy
tego dziennika, jak tylko naciśniemy element.
Więc pozwól, że ci to pokażę, jeśli pozwolisz, aby przeładowano tutaj, a następnie ponownie nauczymy się React Native, a
ja to dodam i stukam to tutaj wiele razy, stukam to, nie widzę tu wyników i powoduje to
sens, to jest niestandardowy komponent i onPress byłby teraz po prostu rekwizytem, który przekazujemy do tego komponentu, ten
rekwizyt byłby podłączony do tej funkcji, ale nic nie uruchamia tej rekwizyty z wnętrza komponentu.
Musimy więc przejść do tego komponentu i upewnić się, że ten widok można nacisnąć.
W rzeczywistości widok ma różne rekwizyty, które pomagają nam w słuchaniu wydarzeń,
jeśli wpiszesz tutaj, twoje IDE, jeśli używasz Visual Studio Code, powinno dać ci autouzupełnianie i
widzisz, że jest całkiem sporo zdarzeń, które możesz
słuchaj, na przykład onTouchEnd faktycznie pomaga nam w słuchaniu, kiedy użytkownik w zasadzie dotyka tego i
kończy to.
Problem polega na tym, że onTouchEnd i kilku innych słuchaczy, których tu mamy, jest na zbyt
niskim poziomie.
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
naciskał ten przycisk, a
jeśli kiedykolwiek będziesz musiał dowiedzieć się, czy było to długie czy krótkie naciśnięcie, musisz ręcznie
ustaw licznik czasu, gdy użytkownik zacznie go dotykać przy pomocy onTouchStart, poczekaj na onTouchEnd, a następnie ręcznie zdecyduj,
czy to było wystarczająco długo, czy nie.
Zazwyczaj nie jest to, co chcesz zrobić, ale oczywiście świetnie jest mieć
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ś
zrobić wszystko podnosząc samemu, musiałbyś napisać
dużo kodu, aby dowiedzieć się, jaki to był dotyk na własną rękę.
Dobrą rzeczą jest to, że React Native Cię obejmuje.
Istnieje wbudowany dotykalny komponent, który można zaimportować, a dotykalny to komponent, który można owinąć wokół
dowolnego innego komponentu, który
masz, więc wokół dowolnego widoku lub dowolnego tekstu lub cokolwiek masz i nie jest widoczny, nie renderuje
niczego widać na ekranie, ale to zawinie i zarejestruje zdarzenie dotykowe na dziecku, które otaczasz, które
można dotknąć i które można dotknąć, a następnie da ci ukończone zdarzenie dotykowe, więc bardziej szczegółowe zdarzenia
dotykowe, które zostały wstępnie skonfigurowane dla Ciebie. Mówiąc ściślej, dotykalny, taki jak ten, nie może
być używany jako komponent, działa on bardziej jako klasa nadrzędna dla React Native, ponieważ istnieje
wiele konkretnych wersji
dotykalnych, których faktycznie powinieneś użyć, na przykład istnieje nieprzezroczystość dotykowa. Użyjmy nieprzezroczystości dotykowej zamiast dotykowej, ponieważ teraz jest
to naprawdę składnik, którego
można użyć, a teraz tutaj zobaczysz, że jeśli wpiszesz, otrzymasz kilka zdarzeń dotykowych wysokiego poziomu, których
możesz słuchać, takich jak onPress lub onLongPress, i
to jest oczywiście o wiele bardziej pomocne.
Teraz tutaj mogę słuchać onPress, co oznacza, że jest to normalne zdarzenie prasowe, jak moglibyśmy słuchać
na przycisku, a gdy zostanie ono uruchomione, to, co możemy zrobić, możemy oczywiście wykonać dowolny kod i na
przykład, możemy przekazać to dalej powiedzmy rekwizyty. onDelete.
Nazywamy więc funkcję, która została przekazana do tego komponentu na rekwidzie onDelete, nie ustawiamy
teraz tej rekwizyty, ale teraz wywołujemy coś na tej rekwizycie i teraz
możemy przejść do tego miejsca, do aplikacji. js, w którym używamy elementu celu i dodajemy
prop onDelete zamiast onPress, a onDelete powinien teraz wskazywać na funkcję, ponieważ oczekujemy funkcji tutaj w naszym
celu celu, ponieważ onPress oczekuje funkcji, a my po prostu przekazujemy to, co onDelete wskazuje na onPress.
Tak więc onDelete powinien wskazywać na funkcję i działa tylko funkcja, która drukuje. Niemniej jednak jest to co najmniej dobre
do testowania,
więc zobaczmy, czy nauczę się React Native i dodam to i stuknę to tutaj wiele razy, zobaczysz, że otrzymuję
tę informację zwrotną, ten niewielki efekt krycia po naciśnięciu, a jeśli to zrobię, ty zobacz
to tutaj w dzienniku, więc to zadziałało. Widzisz także efekt krycia dotykalnego, co
w rzeczywistości daje nam wizualną informację zwrotną na temat naszego dotyku poprzez zmianę krycia
dotkniętego elementu.
Możesz także kontrolować tę krycie, ustawiając tutaj aktywną propę krycia, na krycie dotykalne i ustawiając na liczbę,
na przykład na. 8, a
teraz będzie to mniej przejrzyste, na przykład po naciśnięciu.
Więc teraz, jeśli nauczyłem się tutaj React Native i nacisnę to, efekt krycia
jest znacznie mniej silny, jak widać. Możesz więc skonfigurować to do swoich potrzeb, a dzięki temu
możesz nie tylko dodać przyjemny efekt, ale oczywiście także posłuchać efektu prasy. Teraz dotykalne krycie nie jest jedynym składnikiem,
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ę
to zachowuje, a ogólny pomysł jest taki sam z dotykowym podświetleniem, możesz
także słuchać aby prasować zdarzenia, czyli te wydarzenia na wysokim poziomie, te wstępnie skonfigurowane zdarzenia, ale wizualna
informacja zwrotna będzie inna.
Tutaj nie zmienimy krycia owiniętego elementu, ale kolor tła.
Jeśli teraz nauczę się React Native i kliknę to, zobaczysz teraz,
że kolor tła zmienia się na czarny i, oczywiście, tutaj w tym przypadku
nie jest to pożądany efekt wizualny. Teraz możesz również skonfigurować aktywną nieprzezroczystość, jeśli
chcesz, możesz skonfigurować, które opóźnienie jest zakładane dla długiego naciśnięcia, możesz to zrobić również
przy dotykowym nieprzezroczystości, dzięki czemu możesz skonfigurować ten efekt i możesz po prostu bawić się tym, aby poczuć,
jak go używać.
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
działa na Androidzie, czy nie, pokażę ci, jak ustalić, która platforma uruchamiasz później,
na razie skorzystajmy z tego i nie będzie można
przetestować tego na symulatorze iPhone'a, ale tutaj na Androidzie, jeśli teraz dodam to, zobaczysz, że
uzyskasz ten efekt tętnienia teraz, jeśli przetestujesz to tutaj i oczywiście
możesz również skonfigurować ten efekt tutaj za pomocą rekwizytów, które możesz ustawić i jak zawsze, oficjalne dokumenty są
również doskonałym miejscem, jeśli chcesz dowiedzieć się więcej o tym, jak to skonfigurować, dzięki
czemu
efekt falowania może bądź też miły na Androida.
I na koniec, jest także dotykalny bez sprzężenia zwrotnego i robi to, co sugeruje
nazwa, pozwala rejestrować te zdarzenia, ale nie daje wizualnego sprzężenia zwrotnego, ponieważ czasami chcesz po
prostu mieć coś, co możesz dotknąć, ale gdzie naprawdę nie nie chcę udzielać użytkownikowi żadnych informacji zwrotnych.
Więc tutaj mogę dotknąć tego tak
bardzo, jak chcę, kran jest zarejestrowany i dlatego
widzę tutaj wynik, ale nie otrzymujemy wizualnej informacji zwrotnej. Tak więc te dotykalne komponenty są naprawdę ważne
w React Native, ponieważ pozwalają na podłączenie normalnych odsłuchów dotykowych wysokiego poziomu, takich jak onPress, onLongPress i tak
dalej do dowolnego komponentu w React Native, a tym samym można zbudować własne dotykalne komponenty,
własne przyciski , własne linki, cokolwiek potrzebujesz.
Teraz wrócę do dotykalnego krycia, ponieważ podoba mi się ten efekt krycia, ale naprawdę, możesz wstrzymać film tutaj i bawić się
z tymi różnymi dotykowymi efektami i bawić się różnymi konfiguracjami, które możesz tam
zastosować, oczywiście „ Będę intensywnie
używać dotykowego przez cały ten kurs, więc zobaczymy
go tam wiele razy, ale jest to również świetne miejsce, aby zacząć z tymi
elementami. Jak powiedziałem,
przejdę tutaj z dotykalnym kryciem, a teraz następnym krokiem jest upewnienie się, że nie tylko
logujemy coś do konsoli, ale że faktycznie usuwamy naciśnięty element.