1 00:00:02,400 --> 00:00:09,500 Ahora con eso, si pasamos a la siguiente pantalla donde tenemos un juego en ejecución, nos enfrentamos al siguiente problema 2 00:00:09,520 --> 00:00:10,610 allí. En 3 00:00:10,610 --> 00:00:15,680 modo vertical, se ve bien, pero si giramos el dispositivo, entonces esto no se ve muy bien. 4 00:00:15,680 --> 00:00:20,520 Ahora aquí, una solución simplemente podría ser que cambiemos un poco el estilo 5 00:00:20,570 --> 00:00:23,320 si no tenemos tanta altura disponible. 6 00:00:23,420 --> 00:00:28,150 Alternativamente, representamos un diseño totalmente diferente en función del espacio disponible, 7 00:00:28,220 --> 00:00:30,470 ambas serían opciones que tiene. 8 00:00:30,470 --> 00:00:36,920 Podría, por ejemplo, intentar renderizar esto lado a lado simplemente agregando un if si aquí en la pantalla de su juego 9 00:00:36,920 --> 00:00:42,620 donde devuelve un código jsx totalmente diferente y tal vez también con un estilo totalmente diferente y, por lo 10 00:00:42,620 --> 00:00:49,820 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, 11 00:00:49,820 --> 00:00:51,200 por lo que con 12 00:00:51,200 --> 00:00:56,150 el escenario establecido tal como lo hicimos aquí en la pantalla de inicio del juego para 13 00:00:56,150 --> 00:01:02,560 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í. 14 00:01:02,570 --> 00:01:08,740 Lo que haré es que quiero renderizar mis botones aquí a la izquierda y a la derecha del contenedor de 15 00:01:08,740 --> 00:01:13,370 números si solo tenemos una altura limitada disponible y renderizarlo como siempre lo hicimos si 16 00:01:13,390 --> 00:01:15,160 ese no es el caso. 17 00:01:15,460 --> 00:01:20,560 Por lo tanto, quiero representar un código jsx totalmente diferente en función de mis dimensiones. 18 00:01:20,560 --> 00:01:30,540 Así que aquí agregaré un control if y diré si las dimensiones obtienen la altura de la ventana, digamos que si es menor 19 00:01:30,670 --> 00:01:33,850 que 500 y veremos si ese 20 00:01:33,850 --> 00:01:37,770 valor funciona, luego quiero devolver básicamente este código jsx 21 00:01:37,860 --> 00:01:47,770 desde allí, así que ' Copiaré eso, lo pondré entre paréntesis aquí, entre paréntesis, pero no quiero tener mi tarjeta aquí, en cambio 22 00:01:47,770 --> 00:01:55,390 tendré el primer botón principal antes de mi contenedor de números, el siguiente después del contenedor de números 23 00:01:55,390 --> 00:01:59,530 y tendré todos de eso dentro de una nueva vista 24 00:02:02,410 --> 00:02:09,000 aquí que envolveré alrededor de esto, que debería exponer estas tres cosas en una fila. 25 00:02:09,010 --> 00:02:16,180 Así que agregaré un estilo nuevo aquí, estilos digamos controles o lo que sea que quieras nombrar y ahora agrego 26 00:02:16,300 --> 00:02:21,400 esto a mi hoja de estilos aquí y esa es la misma hoja de 27 00:02:21,400 --> 00:02:27,460 estilos que antes porque simplemente configura estilos que puedo usar en cualquier lugar componente sin importar 28 00:02:27,460 --> 00:02:31,540 en qué condiciones represento qué y aquí estableceré esta dirección 29 00:02:31,540 --> 00:02:38,890 de flexión en fila, el valor predeterminado es columna y ahora queremos tener una fila aquí y estableceré el contenido 30 00:02:39,070 --> 00:02:48,360 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 31 00:02:48,390 --> 00:02:49,470 mal, todavía queda 32 00:02:49,470 --> 00:02:54,690 trabajo por hacer, pero esto es lo que obtengo aquí en modo horizontal o en dispositivos con altura limitada. 33 00:02:55,350 --> 00:02:57,370 En dispositivos con más altura, todavía 34 00:02:57,480 --> 00:03:01,530 obtengo la vista anterior aquí, que por supuesto es exactamente lo que quiero. 35 00:03:01,620 --> 00:03:08,260 Ahora arreglemos esta vista aquí y, por lo tanto, simplemente podemos ir a los controles y darle un ancho 36 00:03:08,260 --> 00:03:16,340 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 37 00:03:16,340 --> 00:03:24,340 contenedor de números y los dos botones están todos centrados verticalmente. Y ahora con eso, si damos otro 38 00:03:24,340 --> 00:03:33,560 intento aquí, ingresamos a esto, esto se ve mucho mejor y funciona de la misma manera que antes, 39 00:03:33,560 --> 00:03:38,950 pero ahora tenemos un diseño diferente en función de nuestras dimensiones. 40 00:03:38,990 --> 00:03:44,960 Ahora, por supuesto, el problema es que este diseño no cambia si giramos, no el fin del mundo, 41 00:03:45,050 --> 00:03:49,560 pero es posible que queramos volver a ese diseño anterior y usted 42 00:03:49,670 --> 00:03:54,690 aprendió cómo funciona, solo tenemos que administrar esto con el estado y establecer un oyente 43 00:03:54,690 --> 00:04:00,200 Ahora ya tengo useState y useEffect aquí en la pantalla del juego, así que todo lo que 44 00:04:00,200 --> 00:04:08,180 tenemos que hacer en nuestro componente de pantalla del juego es comenzar configurando ese estado aquí y al final lo que queremos administrar aquí 45 00:04:08,370 --> 00:04:18,370 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 46 00:04:18,370 --> 00:04:21,960 aquí, solo estamos configurando el ancho del dispositivo detectado, por lo 47 00:04:22,030 --> 00:04:25,370 tanto, también podría nombrar el ancho del dispositivo detectado. 48 00:04:25,450 --> 00:04:34,090 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 49 00:04:34,090 --> 00:04:43,930 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 50 00:04:43,930 --> 00:04:44,470 ancho, 51 00:04:44,470 --> 00:04:46,480 pero también necesitaremos el ancho 52 00:04:49,520 --> 00:04:52,850 para esta comprobación aquí, así que necesitaremos ambos. 53 00:04:53,300 --> 00:04:59,250 Entonces, tenemos el ancho de dispositivo disponible y también administraré otro estado, esa es 54 00:04:59,270 --> 00:05:00,560 nuestra altura 55 00:05:00,560 --> 00:05:03,990 de dispositivo disponible, aquí también se configura la 56 00:05:04,000 --> 00:05:07,300 altura de dispositivo disponible y, por lo tanto, 57 00:05:07,300 --> 00:05:11,700 aquí inicialmente, obtenemos la altura de dispositivo disponible y ahora 58 00:05:11,710 --> 00:05:19,710 tenemos que cambiar ambos cuando nuestro Cambios de orientación. Para eso, podemos usar el efecto, por ejemplo, aquí, configurar una 59 00:05:19,710 --> 00:05:29,310 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 60 00:05:29,330 --> 00:05:35,810 que debería activarse cuando sea En el caso, el diseño de actualización, por ejemplo, es un nombre apropiado 61 00:05:35,810 --> 00:05:39,720 porque eso es exactamente lo que estamos haciendo y allí, 62 00:05:39,850 --> 00:05:51,420 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 63 00:05:51,420 --> 00:05:59,410 obtener las dimensiones de altura de la ventana. Por lo tanto, el diseño de actualización es la 64 00:05:59,410 --> 00:06:05,680 función que señalamos en nuestro detector de eventos en las dimensiones y, al igual que antes, necesitamos 65 00:06:06,010 --> 00:06:14,080 una función de limpieza para evitar representaciones innecesarias y en esta función, simplemente usamos dimensiones para eliminar el cambio del detector 66 00:06:14,170 --> 00:06:23,010 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 67 00:06:23,040 --> 00:06:25,390 y altura de dispositivo disponible. 68 00:06:25,500 --> 00:06:32,190 Entonces, en esto, si marque aquí, uso el ancho de dispositivo disponible y aquí, donde estoy interesado 69 00:06:32,220 --> 00:06:40,170 en la altura, uso la altura de dispositivo disponible. Si ahora guardamos esto, deberíamos tener un diseño en el 70 00:06:40,170 --> 00:06:47,070 que si comenzamos un juego, tenemos este aspecto, pero si luego giramos al modo horizontal, esto cambia y, por 71 00:06:47,070 --> 00:06:55,830 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 72 00:06:55,830 --> 00:07:03,500 realmente bien y nos está dando el aspecto que queremos en función del ancho y la altura disponibles, y 73 00:07:03,510 --> 00:07:06,960 también respeta los cambios cuando giramos el dispositivo.