Comencemos haciendo que esto sea utilizable nuevamente porque eso es lo más importante.
La solución aquí, por supuesto, es hacer que este sea desplazable porque si podemos desplazar esta vista, entonces podemos
alcanzar este botón allí nuevamente.
Entonces, de vuelta en la pantalla de inicio del juego, necesitamos nuevamente la buena vista de desplazamiento anterior que
importamos de React Native y ahora podemos usar eso para ajustar nuestra vista que rodea nuestra pantalla, este
botón tocable sin retroalimentación en este caso, con la vista de desplazamiento .
Así que usemos la vista de desplazamiento para rodear toda nuestra pantalla aquí, todo nuestro componente
al final y con esto, ahora es desplazable. La ventaja es que ahora el teclado está abierto en iOS.
Podemos desplazarnos un poco, pero
aún tenemos el problema de que se recupera, por lo que no es perfecto, pero al menos
podemos alcanzar este botón y nos ocuparemos sobre el teclado en un segundo y
ahora podemos usar la aplicación nuevamente porque ahora podemos comenzar el juego nuevamente. Ahora en la pantalla del juego, por cierto, tenemos un
problema similar en el pequeño dispositivo Android, tenemos tan poca altura disponible que
ni siquiera podemos ver nuestro registro, podemos desplazarlo, pero sí,
eso no es demasiado conveniente y aquí en iOS
, tampoco tenemos un gran registro. Entonces, podríamos querer usar un diseño totalmente diferente,
por ejemplo, o lo que sea, tendremos
que ver, pero antes de
enfocarme en esta pantalla, también hay otra cosa. Hemos solucionado el desplazamiento, eso es bueno, pero
todavía tenemos otros
dos problemas en la pantalla de inicio del juego y
si cambio algo, lo vuelvo a cambiar solo para que esto se reinicie, tenemos el diseño con el que no estoy satisfecho
con los botones, aunque ahora se ve diferente que antes y volveremos a por qué
en un
segundo y el
teclado, ese es el verdadero problema aquí. Entonces, ¿qué podemos hacer al respecto? Para solucionar el problema del teclado,
hay otro componente que puede importar desde React Native y ese es el teclado que evita la vista.
Esa es una vista, un componente que puede usar para envolver su componente, en este caso dentro de esa vista de
desplazamiento y eso es importante, úselo dentro de la vista de desplazamiento y luego
envuelva todo su componente táctil sin comentarios para asegurarse de que su teclado, su teclado virtual cuando se abre nunca superpone la entrada que está
escribiendo y para eso también
puede configurar el teclado evitando la vista, puede
establecer un comportamiento allí y que acepte diferentes valores y configure esto para posicionarse aquí y yo ' Volveré a
los diferentes comportamientos que puede configurar y cómo difieren en un segundo.
Con eso agregado aquí en iOS, ahora verá que esto se desliza un poco cuando abrimos el teclado virtual, cuando
comenzamos a escribir. No se desliza lo suficiente,
pero para eso también podemos volver aquí y establecer el desplazamiento vertical del teclado en un número, por ejemplo, en 30, esta
es la cantidad
de píxeles que lo desliza hacia arriba y
esta debería ser la altura de su entrada típicamente o alrededor de la altura de su entrada.
Y ahora esto lo desliza hacia arriba para que siempre podamos ver
esto, lo cual es genial, ahora nunca superpone nuestra entrada aquí.
Ahora, configurar esto en la posición de comportamiento simplemente significa que reposiciona la pantalla completa en 30 píxeles, básicamente, también
podríamos
configurarlo en relleno para que se agregue un relleno en la parte inferior para deslizar todo hacia arriba y, por
último, pero no menos importante, también puede cambiar el altura total de la pantalla un poco.
Ahora, por lo general, en iOS, funciona mejor si usa position y en Android funciona mejor si usa relleno
y más
adelante en este módulo, aprendió cómo averiguar en qué plataforma se
está ejecutando, por ahora usaré posición aquí. Con eso, solucionamos el problema del teclado.