Ahora con eso, si pasamos a la siguiente pantalla donde tenemos un juego en ejecución, nos enfrentamos al siguiente problema
allí. En
modo vertical, se ve bien, pero si giramos el dispositivo, entonces esto no se ve muy bien.
Ahora aquí, una solución simplemente podría ser que cambiemos un poco el estilo
si no tenemos tanta altura disponible.
Alternativamente, representamos un diseño totalmente diferente en función del espacio disponible,
ambas serían opciones que tiene.
Podría, por ejemplo, intentar renderizar esto lado a lado simplemente agregando un if si aquí en la pantalla de su juego
donde devuelve un código jsx totalmente diferente y tal vez también con un estilo totalmente diferente y, por lo
tanto, un diseño basado en el ancho o la altura disponibles y luego solo necesitará configurar un oyente que vuelva a representar su componente,
por lo que con
el escenario establecido tal como lo hicimos aquí en la pantalla de inicio del juego para
volver a representar su componente siempre que sea el caso. Creo que sería interesante y, por lo tanto, eso es algo que haré aquí.
Lo que haré es que quiero renderizar mis botones aquí a la izquierda y a la derecha del contenedor de
números si solo tenemos una altura limitada disponible y renderizarlo como siempre lo hicimos si
ese no es el caso.
Por lo tanto, quiero representar un código jsx totalmente diferente en función de mis dimensiones.
Así que aquí agregaré un control if y diré si las dimensiones obtienen la altura de la ventana, digamos que si es menor
que 500 y veremos si ese
valor funciona, luego quiero devolver básicamente este código jsx
desde allí, así que ' Copiaré eso, lo pondré entre paréntesis aquí, entre paréntesis, pero no quiero tener mi tarjeta aquí, en cambio
tendré el primer botón principal antes de mi contenedor de números, el siguiente después del contenedor de números
y tendré todos de eso dentro de una nueva vista
aquí que envolveré alrededor de esto, que debería exponer estas tres cosas en una fila.
Así que agregaré un estilo nuevo aquí, estilos digamos controles o lo que sea que quieras nombrar y ahora agrego
esto a mi hoja de estilos aquí y esa es la misma hoja de
estilos que antes porque simplemente configura estilos que puedo usar en cualquier lugar componente sin importar
en qué condiciones represento qué y aquí estableceré esta dirección
de flexión en fila, el valor predeterminado es columna y ahora queremos tener una fila aquí y estableceré el contenido
de justificación en el espacio alrededor y veremos cómo eso parece como. Si ahora guardamos esto y comenzamos un nuevo juego aquí en modo horizontal, no se ve tan
mal, todavía queda
trabajo por hacer, pero esto es lo que obtengo aquí en modo horizontal o en dispositivos con altura limitada.
En dispositivos con más altura, todavía
obtengo la vista anterior aquí, que por supuesto es exactamente lo que quiero.
Ahora arreglemos esta vista aquí y, por lo tanto, simplemente podemos ir a los controles y darle un ancho
de digamos 80% para que el contenedor general sea más grande y muy importante, configure alinear elementos aquí para centrar de modo que el
contenedor de números y los dos botones están todos centrados verticalmente. Y ahora con eso, si damos otro
intento aquí, ingresamos a esto, esto se ve mucho mejor y funciona de la misma manera que antes,
pero ahora tenemos un diseño diferente en función de nuestras dimensiones.
Ahora, por supuesto, el problema es que este diseño no cambia si giramos, no el fin del mundo,
pero es posible que queramos volver a ese diseño anterior y usted
aprendió cómo funciona, solo tenemos que administrar esto con el estado y establecer un oyente
Ahora ya tengo useState y useEffect aquí en la pantalla del juego, así que todo lo que
tenemos que hacer en nuestro componente de pantalla del juego es comenzar configurando ese estado aquí y al final lo que queremos administrar aquí
es el ancho de nuestro dispositivo que cambia con el tiempo, puede nombrar este ancho de dispositivo disponible para dejar en claro que no estamos configurando el ancho del dispositivo
aquí, solo estamos configurando el ancho del dispositivo detectado, por lo
tanto, también podría nombrar el ancho del dispositivo detectado.
Lo nombraré como ancho de dispositivo disponible y estableceré el ancho de dispositivo disponible. Lo administro con useState, donde uso dimensiones obtengo el ancho de la
ventana para obtener el ancho del dispositivo disponible y, por supuesto, acabo de reconocer que esto está mal, estamos interesados en la altura, no en el
ancho,
pero también necesitaremos el ancho
para esta comprobación aquí, así que necesitaremos ambos.
Entonces, tenemos el ancho de dispositivo disponible y también administraré otro estado, esa es
nuestra altura
de dispositivo disponible, aquí también se configura la
altura de dispositivo disponible y, por lo tanto,
aquí inicialmente, obtenemos la altura de dispositivo disponible y ahora
tenemos que cambiar ambos cuando nuestro Cambios de orientación. Para eso, podemos usar el efecto, por ejemplo, aquí, configurar una
función que se ejecute siempre que nuestro componente se procese y en esta función aquí, configuraré dimensiones, agregaré escucha de eventos, escucharé cambiar eventos y configuraré una función
que debería activarse cuando sea En el caso, el diseño de actualización, por ejemplo, es un nombre apropiado
porque eso es exactamente lo que estamos haciendo y allí,
llamo establecer el ancho del dispositivo disponible y configuro esto en la ventana de obtención de dimensiones. ancho y, por supuesto, también establece la altura del dispositivo disponible para
obtener las dimensiones de altura de la ventana. Por lo tanto, el diseño de actualización es la
función que señalamos en nuestro detector de eventos en las dimensiones y, al igual que antes, necesitamos
una función de limpieza para evitar representaciones innecesarias y en esta función, simplemente usamos dimensiones para eliminar el cambio del detector
de eventos donde señalamos el diseño de actualización y nosotros 'eres bueno. Ahora solo necesitamos usar nuestros dos estados aquí: ancho de dispositivo disponible
y altura de dispositivo disponible.
Entonces, en esto, si marque aquí, uso el ancho de dispositivo disponible y aquí, donde estoy interesado
en la altura, uso la altura de dispositivo disponible. Si ahora guardamos esto, deberíamos tener un diseño en el
que si comenzamos un juego, tenemos este aspecto, pero si luego giramos al modo horizontal, esto cambia y, por
supuesto, también lo cambia si es necesario. Aquí en iOS, tenemos este aspecto y tenemos este aspecto si giramos. Así que ahora esto se ve
realmente bien y nos está dando el aspecto que queremos en función del ancho y la altura disponibles, y
también respeta los cambios cuando giramos el dispositivo.