Entonces, para eso, como mencioné, estoy de vuelta en el proyecto en el que trabajamos y, por supuesto, ahora
la pantalla de edición del producto aquí
es lo que me interesa, esta es la pantalla donde tengo estas entradas de texto aquí con mis etiquetas y luego el entrada
de texto, donde actualmente tenemos un manejo de entrada muy básico, al
menos estamos obteniendo la entrada del usuario y almacenándola con la ayuda del estado React, con el gancho de estado
de uso,
luego estamos ingresando los valores de Android en la entrada y eso es.
Esto nos permite capturar y usar la entrada del usuario, pero por un lado, podemos mejorar la forma en que lo
hacemos, podemos escribir esto de una manera más reutilizable y no estamos haciendo ninguna validación, por lo
que estas son las cosas que quiero cambiar en este módulo
Además, tampoco estamos configurando nuestras entradas de ninguna manera, eso significa que en este
momento todas las entradas de texto son iguales.
No cambiamos el tipo de teclado que estamos
presentando, no estamos ofreciendo entradas de varias líneas, por ejemplo, para textos más largos como aquí
para la descripción, nada de eso está sucediendo y, por lo tanto, comencemos configurando estas
entradas antes de continuar a validación y así sucesivamente. Una configuración importante que puede agregar a sus teclados
es el tipo de teclado. Se puede configurar el tipo de teclado y allí tienes un par de valores disponibles. Ahora tiene bastantes valores aquí,
pero los documentos oficiales también son un lugar que debe consultar cuando piense en el tipo que
desea asignar aquí porque cuando visita la documentación oficial de entrada de texto, por supuesto, ve algunos ejemplos, pero
luego también puede ver todos los accesorios que tiene y allí, puede aprender más sobre
cada accesorio y cómo puede configurarlo y, por ejemplo, para
el tipo de teclado, aprendimos que solo estos tipos son compatibles con plataformas cruzadas.
Entonces, si bien tenemos tipos específicos de iOS y Android disponibles, estos tipos solo se pueden usar junto con una
verificación de plataforma para asegurarse de
no usar el tipo en Android que no es compatible allí y que, por lo tanto,
no tendría efecto.
Por lo tanto, me atendré a los tipos de plataforma cruzada, para no tener que agregar una verificación de plataforma adicional y allí, por
lo general, digamos texto normal, mantendríamos el valor predeterminado, que por lo tanto es un tipo que no tenemos que
asignar pero eso, por ejemplo, cambia cuando miramos nuestra entrada de precios. Ahí quiero asegurarme de que las personas solo ingresen números
válidos, que no ingresen ningún texto y, por lo tanto, por supuesto, quiero mostrar el teclado correcto para ayudarlos con
esto y si echamos un vistazo a la documentación
oficial, vemos que hay tres tipos principales de teclados multiplataforma que podemos mostrar: teclado numérico,
teclado decimal y numérico y, por ejemplo, el teclado decimal es una entrada que permite al usuario ingresar números decimales, que es
justo lo que quiero aquí por mi precio. Por lo tanto, configurar este tipo de teclado
aquí tiene mucho sentido porque ahora, si echamos un vistazo a esta
entrada de precio aquí y alterno el teclado virtual que puede hacer con el atajo de comando k aquí en iOS
o con el menú de hardware allí, luego teclado, alternar teclado de software, ves que ahora tengo este teclado decimal que se abre aquí, mientras
que en las otras entradas, tengo un teclado de texto normal y, por supuesto, eso es
lo mismo en Android.
Si vamos al administrador allí y luego miramos el precio, también vemos que allí, se nos presenta esta entrada amigable
con el número en lugar del teclado de texto normal que obtenemos en los otros campos de entrada.
Así es como podemos configurar esto y, por supuesto, esta es una configuración importante. También podemos configurar otras cosas, por
ejemplo aquí en la entrada del título aquí.
Si presiona el espacio de control y observa el autocompletado, verá que hay un montón de cosas que
puede configurar, por ejemplo, si esto debería auto capitalizarse. Allí tiene diferentes valores que puede
establecer, por ejemplo, ese carácter debe estar en mayúscula, solo oraciones o palabras completas
y aquí, buscaré oraciones completas, por ejemplo, para ayudar a ponerlas en mayúsculas.
También puede activar la autocorrección y al agregarla de esta manera, se asegura de que la corrección automática
esté activada para esta entrada, al configurarla como falsa, puede desactivarla o simplemente omitirla, por
supuesto, esa también es una opción, etc. . Hay un montón de cosas que puede configurar
y le recomiendo, como siempre, que eche un vistazo a los documentos oficiales y que aprenda sobre
las opciones de configuración disponibles y
lo que hacen, también simplemente juegue con ellas para obtener un idea de lo que puede hacer allí y qué
hace cada opción y qué podría tener sentido para su próxima aplicación. Otro valor que quiero establecer, por ejemplo, es el
tipo de clave de retorno.
Esto se puede establecer en un par
de valores y, de nuevo, si verifica los documentos oficiales, aprenderá que no todos los valores están
disponibles en todas las plataformas, solo estos cinco son multiplataforma disponibles y allí, básicamente, puede configurar este botón en
la parte inferior esquina derecha. Si echa un vistazo a su entrada
aquí y hace clic en cualquiera de las entradas, es este botón aquí en la esquina inferior derecha que
dice regresar aquí para imageUrl. Ahora en el título, lo configuré como siguiente,
así que si haces clic en el campo del título, ahora ves aquí dice más ancho, que es alemán para el siguiente
y esto es solo porque tengo un emulador alemán aquí y permíteme también reiniciar esto en Android porque se bloqueó allí para
que yo también pueda mostrarlo allí.
Si vamos a nuestra entrada allí, haga clic en el título, verá el siguiente botón aquí, en imageUrl, tiene
este botón hecho aquí y que se puede configurar con el tipo de clave de retorno,
aunque tenga en cuenta que esto solo controla cómo esto se muestra, lo que dice allí, cuál es la etiqueta
allí o qué tipo de botón se
presenta, no cambia automáticamente lo que hace este botón, por ejemplo, si hago clic en el botón más ancho, este
teclado se cierra,
lo mismo es cierto si Hago clic en la tecla de retorno aquí.
Ahora, cuando hablamos del comportamiento de las entradas de texto, todos los eventos que podemos escuchar son interesantes.
Con on, obtienes una idea de todos los eventos que puedes escuchar y, por
ejemplo, allí tienes onBlur que se dispara cada vez que una entrada pierde el foco, onChange se dispararía, así que en cada pulsación
de tecla y te da el evento de entrada completo, onChangeText que también dispara en cada pulsación de tecla, pero solo
le da el texto que se ingresó, que normalmente es lo que más le interesa.
onEndEditing donde también podemos tener una idea de cuándo se dispara, así que si ingreso onEndEditing aquí, veamos cuándo se imprime en
la consola, si ahora voy
aquí a mi entrada y tenga en cuenta que estoy en la entrada del título, así que si Escribo allí prueba, vemos que no
se disparó aquí, si hago clic fuera
de esto, ahora se disparó en EndEditing. Lo mismo es cierto si hago clic en el
botón más ancho aquí, por ejemplo, así que básicamente siempre que dejamos este teclado con el foco o, en general, cuando hacemos clic
en ese botón hecho allí también.
Además, también tenemos otros oyentes, como onFocus, que obviamente se dispara cuando esta entrada se enfoca o también
enSelectionChange cuando seleccionamos texto allí o enSubmitEditing, que se dispara cuando se hace clic en este botón de retorno, así que si agrego onSubmitEditing
aquí, cuando yo agregue este oyente
también y también agregue una declaración de registro de la consola, verá que esto se disparará, cada vez que escriba aquí, no se dispara,
cada vez que haga clic fuera de aquí, tampoco se dispara, solo obtenemos el onEndEditing inicie sesión aquí, pero
se activará
si presiono la tecla más ancha aquí, allí verá en Submitir edición, por lo que este es
un oyente que usaría
para escuchar cuando se hace clic en la tecla de retorno y luego puede
hacer lo que quiera, como enviar su datos o mueva automáticamente el foco a la siguiente entrada
con la ayuda de referencias, por ejemplo, si lo desea.
Así es como puede configurar esto y, como dije, le recomendaría que se sumerja en
esto para tener una idea
de cómo funciona, ahora seguiré adelante y quiero asegurarme de que no solo escuchemos las entradas y almacenamos
los valores pero también validamos lo que ingresa el usuario.