Ahora comenzamos a trabajar en la entrada y no se ve tan mal, pero
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
coma o pegar algunos contenido numérico y
para eso, por supuesto, debemos validar lo que el usuario ingresó aquí.
Ahora, para validar lo que ingresó el usuario, quiero, como ya lo mostré antes, básicamente guardar el valor que ingresó el usuario
en
cada pulsación de tecla y volver a introducirlo en la entrada, pero después de
cada pulsación de tecla, también quiero validar la entrada para hacer seguro de que tenemos un
valor válido allí, así que básicamente un número. Para eso, en primer lugar, necesitamos administrar algún
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
de estado de uso, así que registre algunos estado y ese será el valor ingresado y aunque ese será un número más
tarde, técnicamente es una cadena al principio porque toda la entrada es solo una cadena y usted
tiene que
convertirla manualmente en un número, si así lo desea. También agregaré una función de valor ingresado aquí, el
segundo elemento que recuperamos de ese estado de uso de la matriz nos
da y ahora podemos agregar una constante aquí que nombraré manejador de entrada de número o lo que quieras nombrar.
Esto obtendrá el texto de entrada y esa es la función porque esa es solo una función
que estoy almacenando en esta constante que quiero conectar a mi entrada y allí a onChangeText, señalar el
controlador de entrada de número y
alimentar el valor nuevamente y ese es nuestro valor introducido
Ahora, normalmente, solo diríamos establecer el valor ingresado aquí y establecer el texto de entrada para que
sea nuestro nuevo valor ingresado, que
realimentamos en la entrada, pero aquí, en realidad, primero validaré la entrada.
Entonces, lo que haré aquí es que no estableceré mi valor ingresado directamente
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
será una cadena y eso es un Método Javascript normal que existe en las cadenas, donde reemplazo algún
contenido basado en una expresión regular. Ahora las expresiones regulares pueden dar miedo,
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
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
buscará el primer hit básicamente, sino que buscará todo el texto, lo reemplazaré con una cadena vacía,
por lo
que básicamente eliminaré cualquier no número de valor. Eso es lo que está sucediendo aquí y eso es
lo que almaceno en mi nuevo estado
y con eso, debemos asegurarnos de que el usuario no pueda ingresar nada que no sea un número.
Así que revisemos esto
aquí en Android, si presiono la coma, verá que se elimina instantáneamente y eso es
exactamente lo que necesitamos aquí, solo permitimos valores numéricos.
Así que eso es un poco de validación que tenemos
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
entrada y queremos cerrar ese teclado, ahora mismo Eso no es realmente factible.
No podemos hacer clic afuera y cerrarlo, y sería bueno si pudiéramos. Ahora para asegurarnos de que podemos y que cerramos el
teclado si el usuario toca en otro lugar, en
realidad envolveré toda la vista aquí con un componente especial proporcionado por React Native y ese es el componente táctil sin
comentarios, por lo que es un
componente que nos permite para registrar un oyente táctil sin dar ningún comentario visual porque eso es
exactamente lo que necesitamos aquí.
Podemos envolver toda nuestra pantalla con esto, por lo que
toda nuestra vista se puede envolver con este oyente sin comentarios para que allí o ahora podamos registrar
o escuchar el evento de prensa y cuando ocurra una prensa, quiero descartar el teclado
y para eso, React Native nos da una API útil que podemos importar desde React
Native y esa es la API del teclado. Eso ahora no es un componente, pero es una API donde podemos
interactuar con el dispositivo nativo en sí mismo, por ejemplo, en este caso con el teclado y aquí, al presionar este botón,
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
una función con nombre, pero aquí todo lo
que quiero hacer es llamar al teclado. descartar.
Esa es una función que esta API de teclado que estamos importando de React Native nos da y esto
hace exactamente lo que
sugieren los nombres, de modo que ahora si
tocamos aquí, podemos escribir, pero si toco en otro lugar, descartamos el teclado y el de El curso ocurre en ambas plataformas
y creo que es una mejor experiencia de usuario porque eso es lo que cabría esperar, que cierre
el teclado si toca en otro lugar de la pantalla.