Entonces, paso a paso, estamos progresando, lo que no
podemos hacer es ingresar un número.
Bueno, supongo que técnicamente podemos ingresar un número si encontramos el campo de entrada, aquí está, pero no
es muy divertido buscarlo, sería mejor si pudieras verlo, ¿no?
Por lo tanto, diseñemos un poco ese campo
de entrada, ese campo de entrada de texto aquí, y al igual que antes, lo hice en un componente
separado.
Entonces, en la carpeta de componentes, agregaré mi propia entrada. js y allí, como siempre importa React from React y luego importa
la entrada de texto de React Native y aquí realmente no necesitaré la vista porque tendremos
la entrada de texto aquí con estilo y configurada allí y luego tendremos el
entrada constante aquí, que es nuestro componente funcional, que al final también exportamos, por supuesto, y una cosa que necesitaremos con
certeza es la hoja de
estilo porque ahora debería diseñarse aquí para que tengamos un aspecto de entrada predeterminado que podamos reutilizar
en este aplicación si necesitábamos múltiples entradas en diferentes lugares y esa es
realmente la mentalidad
en la que tiene que entrar, crear componentes reutilizables para que no tenga
que copiar el código o repetirlo, sino que pueda compartir fácilmente sus componentes y crear fácilmente las
aplicaciones que desea de su conjunto de bloques de creación que crea por su cuenta al final.
Así que aquí, mis estilos se oponen con Stylesheet. crear, así, se ve bien y ahora en ese componente, quiero devolver
una entrada de texto, por
lo que esta entrada de texto incorporada.
Ahora, por supuesto, mi idea es que podamos
diseñarlo desde aquí, así que asignemos un estilo desde allí, pero al igual que con la tarjeta, sería bueno si también pudiéramos establecer un estilo desde el
exterior, como un ancho especial o un borde especial, algo así. Para habilitar eso, nuevamente pasaré un objeto aquí
al estilo y, por mi parte,
tomo todos mis estilos configurados en mi objeto de estilos y, digamos, en una propiedad de
entrada que aún tenemos que agregar y, además, también agregamos todos los estilos que estamos obteniendo del estilo de accesorios para que podamos establecer
estilos desde el exterior también y ahora en la hoja de estilo, podemos agregar el estilo
de entrada para asignar un estilo a la entrada. Así que aquí, podríamos darle a esto una altura de digamos 30,
que debería ser una altura que se vea relativamente bien y para ver algo, también quiero agregar un borde en la parte inferior.
También puede agregar un borde alrededor de la entrada completa con el color del borde y el ancho del borde,
etc., pero me gusta esa apariencia donde solo tenemos un borde debajo de la entrada, pero eso es, por supuesto,
totalmente subjetivo y algo que puede configurar de acuerdo con sus preferencias personales. .
Solo se puede establecer un borde en la parte inferior con el color del borde inferior y allí iré
con gris, otro color prefabricado que podemos usar con ese atajo y darle a este borde inferior también un ancho aquí de uno, agregue un margen vertical
de 10 para tener algo de espacio alrededor de la entrada, al menos en la parte superior
e inferior y ahora con eso, el estilo base
para esta entrada de
texto está hecho, ahora usemos eso en la pantalla del juego. Entonces, allí, quiero importar mi propia entrada de la entrada de la
carpeta de componentes, así y reemplazar esta entrada de
texto aquí con mi propia entrada que al final envuelve esta entrada de texto incorporada, por
supuesto.
Así que use
mi propia entrada, elimine la entrada de entrada de texto que ya
no necesitamos y ahora, si guardamos esto, lo vemos un poco, pero es muy pequeño, apenas puede verlo aquí en iOS y se
vuelve más grande a medida que escribes, lo que ciertamente no es lo que queremos, por supuesto.
Por supuesto, no hemos terminado, en
lugar de diseñar el ancho, iré a la
pantalla de inicio del juego, así
que al lugar donde usamos la entrada y configuramos el estilo aquí porque
para mí tiene sentido que tengamos algo general estilos que siempre queremos en el componente de entrada,
algo así como la altura o el borde, pero algunos estilos específicos, como qué tan grande debe ser, entonces
qué
tan ancho debe ser, eso es algo que desea configurar en
el lugar donde realmente usa y, por lo tanto, aquí, agregaré esta propiedad de entrada en el objeto de hoja de estilo de la pantalla de inicio del
juego y tal vez use un ancho de 50 píxeles aquí, eso debería verse bien y asignarlo a mi entrada personalizada aquí con
el accesorio de estilo.
Entonces, ahora podemos señalar estilos. entrada y con eso, tendrá ese ancho en todo
momento y si escribimos allí, ya no
lo ampliamos, sino que simplemente podemos desplazarnos automáticamente en esa entrada.
Ahora, para esta entrada específica, para este diseño específico aquí, también sería bueno si el texto estuviera
centrado,
creo, para la mayoría de las entradas desea ese comportamiento predeterminado de escribir de izquierda a derecha y
comenzar en el
borde izquierdo, pero aquí creo un poco de texto centrado sería bueno y, por lo tanto, en la pantalla de inicio del juego
donde quiero tener este centrado aquí, en esta entrada,
también podemos agregar la propiedad de alineación de texto y establecerla en el centro y ahora esto centrará este texto aquí
en el medio como escribimos
y eso es realmente bueno para ingresar un número, así, así.
Hablando de eso, en este momento podemos ingresar cualquier
cosa allí, por lo que sin duda necesitamos configurar esta entrada y para eso si voy
al componente de entrada donde usamos la entrada de texto, hay muchas cosas que podemos configurar allí y realmente
el mejor recurso siempre es, por supuesto, la documentación oficial. Allí en los documentos de la API, si vas allí y
buscas la entrada de texto, encontrarás no solo una explicación, sino que también encontrarás todos los accesorios que puedes configurar allí y puedes
configurar cosas como si son multilínea o no ,
cuánto puede durar el texto.
También puede establecer un texto de
marcador de posición, puede establecer la autocorrección y todas esas cosas divertidas, así
que definitivamente revise estos documentos para encontrar la propiedad específica que pueda necesitar para su caso de uso.
Quiero poder configurar estos accesorios, pero quiero poder configurarlos desde el lugar
donde uso mi entrada personalizada. Entonces, no desde aquí porque eso aseguraría que usemos
la misma configuración para todas las entradas
que podamos tener en nuestra aplicación, quiero tener más flexibilidad y simplemente configurar un estilo base aquí y configurar
la entrada en el lugar donde luego úselo en lugar del componente de envoltura central.
Lo bueno es React y eso no es React Native, solo React en JavaScript normal tiene una
sintaxis para eso.
Puede tomar sus accesorios que está obteniendo y distribuirlos en su componente de esta manera.
La sintaxis puede parecer un poco extraña, pero lo que al final hace es
que toma todos los accesorios que tienes, todos los accesorios que configuras aquí y básicamente los agrega a tu componente como accesorios.
Ahora, si luego define otros accesorios como estilo y ya tiene un estilo aquí, este
estilo anulará el estilo que tiene aquí
y eso es realmente lo que quiero porque si configuro un accesorio de estilo en mi propia entrada
desde el exterior, definitivamente desea anular esto con este accesorio de estilo y agregar este estilo que está configurado allí para esta
entrada de
texto, pero si configura otros accesorios fuera de este componente, entonces en mi componente personalizado, se agregarán a la
entrada de texto y eso nos permite agregar todos los accesorios que podemos agregar en la entrada de texto
también en nuestra entrada, así como en nuestro propio componente.
Entonces, aquí, donde usamos la entrada, ahora no solo podemos agregar el estilo, sino que también podemos agregar blurOnSubmit, por ejemplo, para
asegurarnos de que cuando presionamos el botón Enviar allí, perdamos el foco
y cerremos el teclado virtual. Podemos configurar autocapitalizar a none, que es uno de los valores permitidos
allí si verifica los documentos. Puede establecerlo en ninguno, oraciones,
palabras, etc., por lo que no quiero activar las mayúsculas aquí porque solo ingresaremos el número,
sino también porque quiero mostrarle las diferentes configuraciones que puede establecer. Estableceré autocorrección aquí en falso para que
no corrijamos automáticamente la entrada del usuario y muy importante aquí, estableceré
el tipo de teclado en numérico, para que el usuario tenga que ingresar un número aquí.
Estableceré la longitud máxima aquí en 2 para que solo puedas ingresar dos dígitos y no un número muy largo
porque este juego aquí y es solo una de las restricciones que tengo aquí, es que este juego solo funciona
con dos dígitos número. Con todo eso configurado,
ahora si volvemos y alterno mi teclado virtual, verá que obtiene ese teclado numérico aquí y solo
puede ingresar dos dígitos allí y no más que eso, que por supuesto es exactamente lo que quiero.
Además, aquí en Android vemos esto, si hace clic en el botón de confirmación, esto
lo cerrará, eso es gracias a esa cosa blurOnSubmit. En iOS, dicho botón no existe aquí, así que allí, en realidad, tendremos
que encontrar una solución diferente para cerrar esto si toca en otro lugar, por ejemplo, porque en este
momento, eso no está sucediendo.
Pero lo bueno es que ahora tenemos un teclado que podemos ver y un teclado donde podemos ingresar números.
Sin embargo, una cosa que quiero cambiar es que ahora mismo, también puedo ingresar un separador decimal aquí.
Ahora, para deshacerse de eso, puede cambiar el tipo de teclado a teclado numérico y ver todos los tipos de teclado disponibles, como siempre
los documentos oficiales son el lugar para ir, allí para la entrada de texto, puede sumergirse en un tipo
de teclado y buscar averiguar qué puede configurar, qué funciona en todas las plataformas y qué podría configurar
si tuviera un control que verifique en qué plataforma está ejecutando el código del que aún no hemos
aprendido.
Sin embargo, el teclado numérico es compatible con ambas plataformas
y si configura esto, ahora tiene una entrada donde no puede ingresar un lugar decimal aquí, si
escribe aquí y no puede hacerlo en iOS. Sin embargo, en Android, lamentablemente puede hacerlo, por lo que
también tendremos que encontrar una solución diferente.