1 00:00:02,330 --> 00:00:03,970 Entonces podemos agregar nuestros elementos 2 00:00:03,970 --> 00:00:08,150 aquí, lo que no podemos hacer es eliminarlos y ese es el siguiente paso que 3 00:00:08,190 --> 00:00:10,880 quiero dar, el siguiente paso que quiero implementar aquí. 4 00:00:10,960 --> 00:00:16,420 Obtuvimos nuestra FlatList con todos estos elementos de objetivo y sería bueno si pudiéramos tocar ese elemento de objetivo, 5 00:00:16,450 --> 00:00:18,010 por lo que dicho elemento 6 00:00:18,130 --> 00:00:21,960 de la lista y cuando lo tocamos, simplemente lo eliminamos de la lista. 7 00:00:21,970 --> 00:00:27,550 Ahora, lo bueno es que podemos identificar de forma única cada elemento porque cada elemento aquí tiene una ID, por lo 8 00:00:27,550 --> 00:00:30,590 que podemos usar esa ID para ello y deshacernos del elemento, 9 00:00:30,760 --> 00:00:35,240 lo que falta es que podemos tocarlo. Ahora en nuestro 10 00:00:35,260 --> 00:00:38,730 propio componente, no podemos simplemente agregar onPress o 11 00:00:38,740 --> 00:00:44,040 algo así, esto no funcionará, si el registro de la consola 12 00:00:44,050 --> 00:00:46,300 funciona aquí, no veremos ese 13 00:00:46,300 --> 00:00:49,570 registro tan pronto como presione el elemento. 14 00:00:49,570 --> 00:00:55,990 Así que déjame mostrarte esto, si dejas que se vuelva a cargar aquí y luego aprendamos React Native y agrego 15 00:00:55,990 --> 00:01:02,050 esto y toco esto varias veces aquí, estoy tocando esto, no ves la salida aquí y hace En este 16 00:01:02,050 --> 00:01:07,990 sentido, este es un componente personalizado y onPress ahora sería simplemente un accesorio que pasamos a este componente, este 17 00:01:07,990 --> 00:01:13,420 accesorio estaría conectado a esta función, pero nada activa ese accesorio desde el interior del componente. 18 00:01:14,020 --> 00:01:18,850 Así que tendremos que entrar en ese componente y asegurarnos de que esta vista sea pressable. 19 00:01:19,030 --> 00:01:24,200 Ahora, en realidad, una vista tiene varios accesorios que nos ayudan a escuchar eventos, 20 00:01:24,280 --> 00:01:30,190 si escribe aquí, su IDE, si está usando Visual Studio Code debería darle algo de autocompletado 21 00:01:30,570 --> 00:01:33,830 y verá que hay muchos eventos que puede 22 00:01:33,940 --> 00:01:40,150 escuchar, por ejemplo, onTouchEnd realmente nos ayuda a escuchar cuando el usuario básicamente toca esto y termina 23 00:01:40,180 --> 00:01:41,450 de tocar esto. 24 00:01:41,620 --> 00:01:48,340 El problema con eso es que onTouchEnd y un par de otros oyentes que obtuvimos aquí están en un nivel 25 00:01:48,430 --> 00:01:49,300 demasiado bajo. 26 00:01:49,480 --> 00:01:56,020 Aquí podemos configurar oyentes muy detallados para varios eventos, pero, por ejemplo, onTouchEnd no nos dice cuánto tiempo 27 00:01:56,020 --> 00:01:57,960 el usuario presionó esto 28 00:01:58,090 --> 00:02:03,640 y si alguna vez necesita saber si fue una pulsación larga o breve, tendría que 29 00:02:03,640 --> 00:02:10,090 hacerlo manualmente. configure un temporizador cuando el usuario comience a tocar esto con onTouchStart, espere onTouchEnd y luego 30 00:02:10,090 --> 00:02:12,480 decida manualmente si fue suficiente o no. 31 00:02:12,610 --> 00:02:16,870 Sin embargo, normalmente no es lo que quieres hacer, por supuesto, es genial que tengas 32 00:02:16,870 --> 00:02:24,100 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 33 00:02:24,100 --> 00:02:26,770 lo pesado levantando por su cuenta, tendría que 34 00:02:26,770 --> 00:02:31,390 escribir una gran cantidad de código para averiguar qué tipo de contacto era por su cuenta. 35 00:02:31,390 --> 00:02:34,200 Lo bueno es que React Native te tiene cubierto. 36 00:02:34,240 --> 00:02:40,660 Hay un componente táctil incorporado que puede importar y táctil es un componente que puede envolver alrededor de 37 00:02:40,660 --> 00:02:42,670 cualquier otro componente que tenga, 38 00:02:42,760 --> 00:02:49,660 por lo que alrededor de cualquier vista o texto o lo que sea que tenga y no es visible, no 39 00:02:49,660 --> 00:02:56,200 muestra nada puede ver en la pantalla, pero esto lo envolverá y registrará el evento táctil en el 40 00:02:56,200 --> 00:03:03,190 niño que envuelve tocable y tocable y luego le da un evento táctil terminado, por lo que los eventos táctiles 41 00:03:03,190 --> 00:03:09,070 más detallados que se configuraron previamente para usted. Ahora, para ser exactos, el toque como este no se 42 00:03:09,070 --> 00:03:13,900 puede usar como un componente, actúa más como una clase principal para React Native porque hay múltiples 43 00:03:13,900 --> 00:03:15,040 versiones específicas de 44 00:03:15,160 --> 00:03:21,730 touchchable que en realidad debería usar, por ejemplo, hay opacidad táctil. Usemos opacidad táctil en lugar de táctil porque 45 00:03:21,730 --> 00:03:23,980 ahora realmente es un componente 46 00:03:23,980 --> 00:03:30,760 que puede usar y ahora, verá que si escribe, obtiene un par de eventos táctiles de alto 47 00:03:30,760 --> 00:03:34,140 nivel que puede escuchar, como onPress o onLongPress y 48 00:03:34,210 --> 00:03:37,120 eso es por supuesto mucho más útil. 49 00:03:37,120 --> 00:03:42,910 Ahora aquí, puedo escuchar onPress, lo que significa que es un evento de prensa normal, ya que podríamos 50 00:03:42,910 --> 00:03:49,290 escuchar en el botón y, cuando se activa, lo que podemos hacer, por supuesto, podemos ejecutar cualquier código que queramos 51 00:03:49,360 --> 00:03:54,520 y, por ejemplo, podríamos reenviar esto digamos accesorios. onDelete. 52 00:03:54,520 --> 00:04:00,400 Entonces llamamos a una función que se pasó a este componente en el accesorio onDelete, no estamos 53 00:04:00,410 --> 00:04:05,980 configurando este accesorio en este momento, pero ahora estamos llamando a algo en este accesorio y 54 00:04:05,980 --> 00:04:12,610 ahora podemos ir al lugar, a la aplicación. js donde usamos el elemento objetivo y agregamos el 55 00:04:12,610 --> 00:04:18,820 accesorio onDelete en lugar de onPress y onDelete ahora debería apuntar a una función porque esperamos una función aquí 56 00:04:18,820 --> 00:04:25,030 en nuestro elemento objetivo porque onPress espera una función y simplemente reenviamos lo que onDelete apunta a onPress. 57 00:04:25,840 --> 00:04:32,750 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 58 00:04:32,980 --> 00:04:34,480 las pruebas, así 59 00:04:34,480 --> 00:04:43,310 que veamos si aprendo React Native y agrego esto y toco esto aquí varias veces, ves que recibo este comentario, 60 00:04:43,310 --> 00:04:49,940 este ligero efecto de opacidad aquí al presionar y si hago esto, tú mira eso 61 00:04:49,940 --> 00:04:56,070 aquí en el registro, así que funcionó. Y también ve el efecto de la opacidad 62 00:04:56,110 --> 00:05:02,560 táctil, esto en realidad nos da una retroalimentación visual sobre nuestro tacto al cambiar la opacidad del elemento 63 00:05:02,560 --> 00:05:03,600 que tocamos. 64 00:05:03,610 --> 00:05:10,930 También puede controlar esta opacidad configurando el accesorio de opacidad activo aquí, en opacidad táctil y estableciendo esto en un número, 65 00:05:10,930 --> 00:05:13,620 por ejemplo, a. 8 y ahora 66 00:05:13,750 --> 00:05:18,120 esto será mucho menos transparente, por ejemplo, si lo presiona. 67 00:05:18,130 --> 00:05:23,980 Entonces, si aprendí React Native aquí y presiono esto, el efecto de opacidad es 68 00:05:23,980 --> 00:05:29,860 mucho menos fuerte como puedes ver. Por lo tanto, puede configurar esto según sus necesidades y con eso, no solo puede 69 00:05:29,860 --> 00:05:35,980 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 70 00:05:35,980 --> 00:05:43,720 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 71 00:05:43,750 --> 00:05:48,850 cómo se comporta eso y la idea general es la misma con el resaltado táctil, 72 00:05:48,880 --> 00:05:55,570 también puede escuchar para presionar eventos, por lo que para estos eventos de alto nivel, estos eventos preconfigurados, pero la 73 00:05:55,570 --> 00:05:57,370 retroalimentación visual será diferente. 74 00:05:57,460 --> 00:06:01,980 Aquí, no cambiaremos la opacidad del elemento envuelto sino el color de fondo. 75 00:06:02,020 --> 00:06:06,520 Entonces, si aprendo React Native y toco esto, verá que el 76 00:06:06,520 --> 00:06:11,830 color de fondo cambia a negro y, por supuesto, esto en este caso no 77 00:06:11,830 --> 00:06:17,260 es el efecto visual que queremos. Ahora también puede configurar la opacidad activa allí 78 00:06:17,260 --> 00:06:22,660 si lo desea, puede configurar qué retraso se supone para una pulsación larga, podría haberlo hecho 79 00:06:22,660 --> 00:06:29,080 también en la opacidad táctil, para que pueda configurar ese efecto y simplemente jugar con eso para tener una idea 80 00:06:29,080 --> 00:06:30,360 de cómo usarlo. 81 00:06:30,700 --> 00:06:40,240 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 82 00:06:40,240 --> 00:06:45,150 esto se ejecuta en Android o no, le mostraré cómo determinar qué plataforma está ejecutando 83 00:06:45,190 --> 00:06:48,550 más tarde, por ahora usemos eso y no podrá probar 84 00:06:48,550 --> 00:06:53,980 esto en el simulador de iPhone, pero aquí en Android, si ahora agrego esto, verá que 85 00:06:53,980 --> 00:06:58,140 ahora obtiene este efecto dominó si prueba esto aquí y, por supuesto, 86 00:06:58,140 --> 00:07:04,930 también puede configurar este efecto aquí con accesorios que puede configurar y, como siempre, los documentos oficiales también son un 87 00:07:05,090 --> 00:07:10,400 gran lugar para ir si desea obtener más información sobre cómo configurar esto, por lo que 88 00:07:10,400 --> 00:07:11,080 tener 89 00:07:11,090 --> 00:07:14,360 ese efecto dominó puede Sé amable con Android también. 90 00:07:14,420 --> 00:07:19,940 Y por último, pero no menos importante, también se puede tocar sin comentarios y esto hace 91 00:07:20,000 --> 00:07:25,700 lo que su nombre sugiere, le permite registrar estos eventos pero no proporciona comentarios visuales porque a 92 00:07:25,700 --> 00:07:31,970 veces solo desea tener algo que pueda tocar pero donde realmente no No quiero dar ningún comentario al usuario. 93 00:07:32,240 --> 00:07:34,740 Entonces, aquí, puedo tocar esto todo lo 94 00:07:34,820 --> 00:07:37,760 que quiera, el toque está registrado y, por lo 95 00:07:37,760 --> 00:07:44,210 tanto, veo la salida aquí, pero no recibimos comentarios visuales. Por lo tanto, estos componentes táctiles son realmente importantes 96 00:07:44,240 --> 00:07:51,140 en React Native porque le permiten conectar los oyentes táctiles normales de alto nivel, como onPress, onLongPress, etc. a cualquier 97 00:07:51,230 --> 00:07:57,080 componente en React Native y con eso puede construir sus propios componentes táctiles, sus propios botones 98 00:07:57,080 --> 00:07:59,980 , tus propios enlaces, lo que necesites. 99 00:07:59,980 --> 00:08:08,800 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 100 00:08:08,800 --> 00:08:14,410 jugar con estos diferentes efectos táctiles y jugar con las diferentes configuraciones que puede aplicar 101 00:08:14,410 --> 00:08:16,490 allí, obviamente nosotros ' Usaré 102 00:08:16,570 --> 00:08:19,990 mucho el toque durante todo este curso, por lo 103 00:08:19,990 --> 00:08:26,020 que los veremos allí muchas veces, pero este también es un gran lugar para que comiences con 104 00:08:26,140 --> 00:08:27,940 estos componentes. Como dije, 105 00:08:27,940 --> 00:08:33,040 iré con opacidad táctil aquí y ahora el siguiente paso es asegurarme de que no solo registremos 106 00:08:33,040 --> 00:08:36,700 algo en la consola, sino que realmente eliminemos el elemento que se presionó.