1 00:00:02,140 --> 00:00:06,630 Ahora comenzamos a trabajar en la entrada y no se ve tan mal, pero 2 00:00:06,630 --> 00:00:13,980 queremos asegurarnos de que los usuarios solo puedan ingresar números que solo sean dígitos y que no podamos ingresar un punto aquí o una 3 00:00:13,980 --> 00:00:16,440 coma o pegar algunos contenido numérico y 4 00:00:16,530 --> 00:00:20,280 para eso, por supuesto, debemos validar lo que el usuario ingresó aquí. 5 00:00:20,550 --> 00:00:27,900 Ahora, para validar lo que ingresó el usuario, quiero, como ya lo mostré antes, básicamente guardar el valor que ingresó el usuario 6 00:00:27,900 --> 00:00:28,440 en 7 00:00:28,440 --> 00:00:33,510 cada pulsación de tecla y volver a introducirlo en la entrada, pero después de 8 00:00:33,510 --> 00:00:39,000 cada pulsación de tecla, también quiero validar la entrada para hacer seguro de que tenemos un 9 00:00:39,000 --> 00:00:44,770 valor válido allí, así que básicamente un número. Para eso, en primer lugar, necesitamos administrar algún 10 00:00:44,860 --> 00:00:54,510 estado aquí en la pantalla de inicio del juego, por lo que importaré el estado de uso y luego aquí al comienzo de este componente, configuraré mi llamada 11 00:00:54,520 --> 00:01:02,180 de estado de uso, así que registre algunos estado y ese será el valor ingresado y aunque ese será un número más 12 00:01:02,300 --> 00:01:08,000 tarde, técnicamente es una cadena al principio porque toda la entrada es solo una cadena y usted 13 00:01:08,000 --> 00:01:09,080 tiene que 14 00:01:09,080 --> 00:01:15,170 convertirla manualmente en un número, si así lo desea. También agregaré una función de valor ingresado aquí, el 15 00:01:15,170 --> 00:01:19,220 segundo elemento que recuperamos de ese estado de uso de la matriz nos 16 00:01:19,430 --> 00:01:25,660 da y ahora podemos agregar una constante aquí que nombraré manejador de entrada de número o lo que quieras nombrar. 17 00:01:25,700 --> 00:01:32,830 Esto obtendrá el texto de entrada y esa es la función porque esa es solo una función 18 00:01:32,830 --> 00:01:40,690 que estoy almacenando en esta constante que quiero conectar a mi entrada y allí a onChangeText, señalar el 19 00:01:40,960 --> 00:01:43,930 controlador de entrada de número y 20 00:01:43,930 --> 00:01:48,330 alimentar el valor nuevamente y ese es nuestro valor introducido 21 00:01:48,420 --> 00:01:54,480 Ahora, normalmente, solo diríamos establecer el valor ingresado aquí y establecer el texto de entrada para que 22 00:01:54,480 --> 00:01:56,720 sea nuestro nuevo valor ingresado, que 23 00:01:56,820 --> 00:02:01,220 realimentamos en la entrada, pero aquí, en realidad, primero validaré la entrada. 24 00:02:01,290 --> 00:02:06,300 Entonces, lo que haré aquí es que no estableceré mi valor ingresado directamente 25 00:02:06,330 --> 00:02:15,790 en el texto aquí, sino que lo estableceré en mi texto de entrada donde lo reemplace y puedo llamar a reemplazar porque el texto de entrada 26 00:02:15,790 --> 00:02:22,450 será una cadena y eso es un Método Javascript normal que existe en las cadenas, donde reemplazo algún 27 00:02:22,450 --> 00:02:27,430 contenido basado en una expresión regular. Ahora las expresiones regulares pueden dar miedo, 28 00:02:27,430 --> 00:02:36,010 pero esa es una simple, la creamos con dos barras diagonales y allí, agregaré corchetes y, básicamente, con esta expresión decir que estoy reemplazando 29 00:02:36,040 --> 00:02:45,250 cualquier cosa que no sea un número del 0 al 9, entonces no un número, globalmente en todo el texto, lo que significa que no solo 30 00:02:45,250 --> 00:02:51,630 buscará el primer hit básicamente, sino que buscará todo el texto, lo reemplazaré con una cadena vacía, 31 00:02:52,850 --> 00:02:53,940 por lo 32 00:02:56,620 --> 00:03:02,440 que básicamente eliminaré cualquier no número de valor. Eso es lo que está sucediendo aquí y eso es 33 00:03:02,440 --> 00:03:04,540 lo que almaceno en mi nuevo estado 34 00:03:04,600 --> 00:03:09,460 y con eso, debemos asegurarnos de que el usuario no pueda ingresar nada que no sea un número. 35 00:03:09,460 --> 00:03:11,410 Así que revisemos esto 36 00:03:11,410 --> 00:03:16,720 aquí en Android, si presiono la coma, verá que se elimina instantáneamente y eso es 37 00:03:16,720 --> 00:03:19,960 exactamente lo que necesitamos aquí, solo permitimos valores numéricos. 38 00:03:19,960 --> 00:03:24,030 Así que eso es un poco de validación que tenemos 39 00:03:24,030 --> 00:03:32,890 aquí, aunque no es todo lo que quiero, pero aún no hemos terminado con la entrada porque en iOS, si estamos en ese modo de 40 00:03:32,890 --> 00:03:37,410 entrada y queremos cerrar ese teclado, ahora mismo Eso no es realmente factible. 41 00:03:37,420 --> 00:03:44,500 No podemos hacer clic afuera y cerrarlo, y sería bueno si pudiéramos. Ahora para asegurarnos de que podemos y que cerramos el 42 00:03:44,500 --> 00:03:47,960 teclado si el usuario toca en otro lugar, en 43 00:03:48,160 --> 00:03:56,020 realidad envolveré toda la vista aquí con un componente especial proporcionado por React Native y ese es el componente táctil sin 44 00:03:56,020 --> 00:03:58,490 comentarios, por lo que es un 45 00:03:58,630 --> 00:04:04,960 componente que nos permite para registrar un oyente táctil sin dar ningún comentario visual porque eso es 46 00:04:04,960 --> 00:04:07,060 exactamente lo que necesitamos aquí. 47 00:04:07,150 --> 00:04:11,080 Podemos envolver toda nuestra pantalla con esto, por lo que 48 00:04:11,080 --> 00:04:18,190 toda nuestra vista se puede envolver con este oyente sin comentarios para que allí o ahora podamos registrar 49 00:04:18,190 --> 00:04:24,070 o escuchar el evento de prensa y cuando ocurra una prensa, quiero descartar el teclado 50 00:04:24,070 --> 00:04:30,010 y para eso, React Native nos da una API útil que podemos importar desde React 51 00:04:30,010 --> 00:04:37,240 Native y esa es la API del teclado. Eso ahora no es un componente, pero es una API donde podemos 52 00:04:37,240 --> 00:04:43,820 interactuar con el dispositivo nativo en sí mismo, por ejemplo, en este caso con el teclado y aquí, al presionar este botón, 53 00:04:43,820 --> 00:04:50,230 quiero activar una función y aquí iré con una función en línea simple, una función anónima corta, por supuesto, también podría usar 54 00:04:50,230 --> 00:04:52,700 una función con nombre, pero aquí todo lo 55 00:04:52,870 --> 00:04:57,230 que quiero hacer es llamar al teclado. descartar. 56 00:04:57,310 --> 00:05:02,680 Esa es una función que esta API de teclado que estamos importando de React Native nos da y esto 57 00:05:02,680 --> 00:05:04,220 hace exactamente lo que 58 00:05:04,360 --> 00:05:06,570 sugieren los nombres, de modo que ahora si 59 00:05:06,580 --> 00:05:12,610 tocamos aquí, podemos escribir, pero si toco en otro lugar, descartamos el teclado y el de El curso ocurre en ambas plataformas 60 00:05:12,640 --> 00:05:17,740 y creo que es una mejor experiencia de usuario porque eso es lo que cabría esperar, que cierre 61 00:05:18,160 --> 00:05:21,040 el teclado si toca en otro lugar de la pantalla.