Entonces podemos agregar nuestros elementos
aquí, lo que no podemos hacer es eliminarlos y ese es el siguiente paso que
quiero dar, el siguiente paso que quiero implementar aquí.
Obtuvimos nuestra FlatList con todos estos elementos de objetivo y sería bueno si pudiéramos tocar ese elemento de objetivo,
por lo que dicho elemento
de la lista y cuando lo tocamos, simplemente lo eliminamos de la lista.
Ahora, lo bueno es que podemos identificar de forma única cada elemento porque cada elemento aquí tiene una ID, por lo
que podemos usar esa ID para ello y deshacernos del elemento,
lo que falta es que podemos tocarlo. Ahora en nuestro
propio componente, no podemos simplemente agregar onPress o
algo así, esto no funcionará, si el registro de la consola
funciona aquí, no veremos ese
registro tan pronto como presione el elemento.
Así que déjame mostrarte esto, si dejas que se vuelva a cargar aquí y luego aprendamos React Native y agrego
esto y toco esto varias veces aquí, estoy tocando esto, no ves la salida aquí y hace En este
sentido, este es un componente personalizado y onPress ahora sería simplemente un accesorio que pasamos a este componente, este
accesorio estaría conectado a esta función, pero nada activa ese accesorio desde el interior del componente.
Así que tendremos que entrar en ese componente y asegurarnos de que esta vista sea pressable.
Ahora, en realidad, una vista tiene varios accesorios que nos ayudan a escuchar eventos,
si escribe aquí, su IDE, si está usando Visual Studio Code debería darle algo de autocompletado
y verá que hay muchos eventos que puede
escuchar, por ejemplo, onTouchEnd realmente nos ayuda a escuchar cuando el usuario básicamente toca esto y termina
de tocar esto.
El problema con eso es que onTouchEnd y un par de otros oyentes que obtuvimos aquí están en un nivel
demasiado bajo.
Aquí podemos configurar oyentes muy detallados para varios eventos, pero, por ejemplo, onTouchEnd no nos dice cuánto tiempo
el usuario presionó esto
y si alguna vez necesita saber si fue una pulsación larga o breve, tendría que
hacerlo manualmente. configure un temporizador cuando el usuario comience a tocar esto con onTouchStart, espere onTouchEnd y luego
decida manualmente si fue suficiente o no.
Sin embargo, normalmente no es lo que quieres hacer, por supuesto, es genial que tengas
toda la flexibilidad para hacerlo, pero si quieres estos eventos táctiles estándar como la pulsación larga, bueno, esto no es ideal porque tendrías que hacer todo
lo pesado levantando por su cuenta, tendría que
escribir una gran cantidad de código para averiguar qué tipo de contacto era por su cuenta.
Lo bueno es que React Native te tiene cubierto.
Hay un componente táctil incorporado que puede importar y táctil es un componente que puede envolver alrededor de
cualquier otro componente que tenga,
por lo que alrededor de cualquier vista o texto o lo que sea que tenga y no es visible, no
muestra nada puede ver en la pantalla, pero esto lo envolverá y registrará el evento táctil en el
niño que envuelve tocable y tocable y luego le da un evento táctil terminado, por lo que los eventos táctiles
más detallados que se configuraron previamente para usted. Ahora, para ser exactos, el toque como este no se
puede usar como un componente, actúa más como una clase principal para React Native porque hay múltiples
versiones específicas de
touchchable que en realidad debería usar, por ejemplo, hay opacidad táctil. Usemos opacidad táctil en lugar de táctil porque
ahora realmente es un componente
que puede usar y ahora, verá que si escribe, obtiene un par de eventos táctiles de alto
nivel que puede escuchar, como onPress o onLongPress y
eso es por supuesto mucho más útil.
Ahora aquí, puedo escuchar onPress, lo que significa que es un evento de prensa normal, ya que podríamos
escuchar en el botón y, cuando se activa, lo que podemos hacer, por supuesto, podemos ejecutar cualquier código que queramos
y, por ejemplo, podríamos reenviar esto digamos accesorios. onDelete.
Entonces llamamos a una función que se pasó a este componente en el accesorio onDelete, no estamos
configurando este accesorio en este momento, pero ahora estamos llamando a algo en este accesorio y
ahora podemos ir al lugar, a la aplicación. js donde usamos el elemento objetivo y agregamos el
accesorio onDelete en lugar de onPress y onDelete ahora debería apuntar a una función porque esperamos una función aquí
en nuestro elemento objetivo porque onPress espera una función y simplemente reenviamos lo que onDelete apunta a onPress.
Entonces onDelete debe apuntar a una función y es solo una función que imprime funciona. Sin embargo, eso es al menos bueno para
las pruebas, así
que veamos si aprendo React Native y agrego esto y toco esto aquí varias veces, ves que recibo este comentario,
este ligero efecto de opacidad aquí al presionar y si hago esto, tú mira eso
aquí en el registro, así que funcionó. Y también ve el efecto de la opacidad
táctil, esto en realidad nos da una retroalimentación visual sobre nuestro tacto al cambiar la opacidad del elemento
que tocamos.
También puede controlar esta opacidad configurando el accesorio de opacidad activo aquí, en opacidad táctil y estableciendo esto en un número,
por ejemplo, a. 8 y ahora
esto será mucho menos transparente, por ejemplo, si lo presiona.
Entonces, si aprendí React Native aquí y presiono esto, el efecto de opacidad es
mucho menos fuerte como puedes ver. Por lo tanto, puede configurar esto según sus necesidades y con eso, no solo puede
agregar un efecto agradable sino que, por supuesto, también puede escuchar el efecto de la prensa. Ahora, la opacidad táctil no es el único componente
que puede usar, sin embargo, además de la opacidad táctil, también tiene resaltado táctil, así que usemos ahora el resaltado táctil para ver
cómo se comporta eso y la idea general es la misma con el resaltado táctil,
también puede escuchar para presionar eventos, por lo que para estos eventos de alto nivel, estos eventos preconfigurados, pero la
retroalimentación visual será diferente.
Aquí, no cambiaremos la opacidad del elemento envuelto sino el color de fondo.
Entonces, si aprendo React Native y toco esto, verá que el
color de fondo cambia a negro y, por supuesto, esto en este caso no
es el efecto visual que queremos. Ahora también puede configurar la opacidad activa allí
si lo desea, puede configurar qué retraso se supone para una pulsación larga, podría haberlo hecho
también en la opacidad táctil, para que pueda configurar ese efecto y simplemente jugar con eso para tener una idea
de cómo usarlo.
Además de la opacidad táctil y el resaltado táctil, también tiene comentarios nativos táctiles y eso solo funciona en Android y por ahora, no sabe cómo averiguar si
esto se ejecuta en Android o no, le mostraré cómo determinar qué plataforma está ejecutando
más tarde, por ahora usemos eso y no podrá probar
esto en el simulador de iPhone, pero aquí en Android, si ahora agrego esto, verá que
ahora obtiene este efecto dominó si prueba esto aquí y, por supuesto,
también puede configurar este efecto aquí con accesorios que puede configurar y, como siempre, los documentos oficiales también son un
gran lugar para ir si desea obtener más información sobre cómo configurar esto, por lo que
tener
ese efecto dominó puede Sé amable con Android también.
Y por último, pero no menos importante, también se puede tocar sin comentarios y esto hace
lo que su nombre sugiere, le permite registrar estos eventos pero no proporciona comentarios visuales porque a
veces solo desea tener algo que pueda tocar pero donde realmente no No quiero dar ningún comentario al usuario.
Entonces, aquí, puedo tocar esto todo lo
que quiera, el toque está registrado y, por lo
tanto, veo la salida aquí, pero no recibimos comentarios visuales. Por lo tanto, estos componentes táctiles son realmente importantes
en React Native porque le permiten conectar los oyentes táctiles normales de alto nivel, como onPress, onLongPress, etc. a cualquier
componente en React Native y con eso puede construir sus propios componentes táctiles, sus propios botones
, tus propios enlaces, lo que necesites.
Ahora aquí, volveré a la opacidad táctil porque me gusta este efecto de opacidad, pero realmente, siéntase libre de pausar el video aquí y
jugar con estos diferentes efectos táctiles y jugar con las diferentes configuraciones que puede aplicar
allí, obviamente nosotros ' Usaré
mucho el toque durante todo este curso, por lo
que los veremos allí muchas veces, pero este también es un gran lugar para que comiences con
estos componentes. Como dije,
iré con opacidad táctil aquí y ahora el siguiente paso es asegurarme de que no solo registremos
algo en la consola, sino que realmente eliminemos el elemento que se presionó.