Ahora, ¿qué pasa con
el estilo, qué pasa con estos botones? Ahora, para estos botones,
puede notar que ahora tiene un comportamiento extraño si
lo vuelve a escribir en modo vertical, también aquí en Android. Por otro lado, si cambiamos algo y lo deshacemos solo
para que la aplicación se reinicie y comencemos en modo vertical, verá que se ve
bien, pero ahora si pasamos al modo horizontal, se ve mal nuevamente.
Básicamente, el ancho de nuestros botones se registra cuando se inicia la aplicación y no se ajusta cuando cambia el tamaño de nuestra pantalla
y, por supuesto, cambia cuando giramos el dispositivo porque el ancho y la altura se intercambian, por
lo
que tenemos más ancho disponible si Estás en modo horizontal que tenemos en modo vertical.
El problema es que actualmente en la pantalla de inicio del juego cuando establecemos el ancho de nuestros botones
que hacemos allí, usamos dimensiones get y esto y eso es muy importante a tener en cuenta, esto
solo se calcula cuando se inicia la aplicación.
Entonces, cuando la aplicación se inicia por primera vez, se observa el ancho disponible y, si se inicia
en modo
vertical, ese es el ancho del modo vertical, si se inicia en modo horizontal, es el ancho
del modo horizontal y se registra y cuando luego gira el dispositivo y si luego lo gira, esto no se vuelve a calcular.
Ahora, por supuesto, querrás que esto vuelva a calcular y hay una solución simple para eso.
Si tiene un ancho o alto, cualquier cosa que obtenga de las dimensiones que debe respetar los cambios
de orientación, por lo que debe recalcular cuando cambie la orientación, entonces no debe usar el ancho de las dimensiones
allí abajo en su hoja de estilo, sino que debe administrar el ancho o cualquiera que sea la propiedad que pueda cambiar
dinámicamente y que debería volver a representar la interfaz de usuario cuando cambie con el estado.
Entonces, aquí en la cadena de inicio del juego,
ya tenemos useState, ahora también podemos administrar el ancho de nuestro botón aquí, establecer el ancho del botón con useState e inicializar esto para
obtener las dimensiones para obtener el ancho de la ventana dividido por cuatro, que es el
valor predeterminado con el que comencé.
Ahora puede configurar un oyente aquí en dimensiones, en lugar de usar get llamando a add event listener y escuchando el
evento change que se activa cada vez que cambian las dimensiones, que suele ser el
caso cuando el usuario gira el dispositivo.
Entonces, aquí, podemos configurar una función, actualizar el diseño, por ejemplo, que es una función en la que llamo establecer el ancho del botón y establecerlo nuevamente en mi
ancho aquí, pero el ancho de las dimensiones será diferente en función del ancho de la pantalla cuando giremos y es esta
función la que quiero
llamar aquí, por lo que es el diseño de actualización que quiero llamar aquí sin paréntesis aquí porque
solo queremos señalar esta función para que se llame cuando cambien las dimensiones y
esto nos asegurará de que esto se vuelve a ejecutar cada vez que cambian nuestras dimensiones
y, por lo tanto, este componente se volverá a representar.
Ahora solo tenemos que asegurarnos de usar el botón recalculado dinámicamente con el estado aquí.
Podemos hacer esto usando estilos en línea en lugar de un objeto de hoja de estilo.
Ahora, si tenía otros estilos configurados para el botón que no dependen de las dimensiones, entonces podría dejarlos aquí
en la hoja de estilos, por supuesto, en
este caso no tengo eso, así que solo comentaré esto y luego podría fusionar eso con
algunos estilos en línea. Aquí, dado que no tenemos
otros estilos predeterminados, simplemente reemplazaré este objeto de hoja de estilo al que apuntamos con un objeto de estilo en
línea donde establezco el ancho igual al ancho del botón y hago lo mismo, por supuesto, para mi segundo botón
y con eso, ahora tiene un estilo que cambia cada vez que giramos el dispositivo.
Entonces, si guardamos esto, verá que ahora se ve bien,
no importa cómo rotamos esto, también en Android porque se vuelve a representar.
Sin embargo, ahora una nota importante aquí, ahora mismo en el momento en que estoy configurando un grupo de oyentes de eventos aquí,
siempre agrego un nuevo oyente de eventos cada vez que este componente se vuelve a procesar
y eso
no es lo que quiero hacer y podemos usar use efecto que también está integrado en React y que debe tener en cuenta
para tener código que ejecutamos cada vez que nuestro componente se vuelve a representar.
Así que ahora puedo usar el efecto de uso aquí y la función que quiero ejecutar en cada renderizado es una función que al
final crea esta función de diseño de actualización aquí y agrega mi detector de eventos, así
que cortaré esto y lo agregaré aquí en la función de efecto de uso y si luego
devolvemos algo aquí en efecto de uso, esa es nuestra función de limpieza que se ejecuta justo
antes de que se ejecute el efecto de uso en ese momento, quiero limpiar mi escucha porque aquí puedo llamar a dimensiones eliminar el cambio
de escucha del evento para Actualización de diseño.
Así que ahora limpiamos esto y configuramos uno nuevo cuando nuestro componente vuelve a renderizar, limpia el viejo, configura
uno nuevo y, por lo tanto, siempre tenemos un escucha de eventos en ejecución.
Si lo hacemos así, eso es simplemente más limpio y, por lo tanto, si ahora guardamos esto y volvemos, tenemos
el mismo comportamiento que antes pero ahora de manera limpia al utilizar useState y use effect y lo más
importante, las capacidades de escucha de eventos de las API de dimensiones que nos permiten no solo establecer dimensiones
una vez, sino recalcularlas cuando cambian.