1
00:00:02,130 --> 00:00:03,280
Ahora, ¿qué pasa con

2
00:00:03,280 --> 00:00:07,130
el estilo, qué pasa con estos botones? Ahora, para estos botones,

3
00:00:07,130 --> 00:00:10,600
puede notar que ahora tiene un comportamiento extraño si

4
00:00:10,610 --> 00:00:18,600
lo vuelve a escribir en modo vertical, también aquí en Android. Por otro lado, si cambiamos algo y lo deshacemos solo

5
00:00:18,690 --> 00:00:24,000
para que la aplicación se reinicie y comencemos en modo vertical, verá que se ve

6
00:00:24,000 --> 00:00:28,240
bien, pero ahora si pasamos al modo horizontal, se ve mal nuevamente.

7
00:00:28,260 --> 00:00:36,060
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

8
00:00:36,060 --> 00:00:41,670
y, por supuesto, cambia cuando giramos el dispositivo porque el ancho y la altura se intercambian, por

9
00:00:41,670 --> 00:00:42,320
lo

10
00:00:42,330 --> 00:00:47,280
que tenemos más ancho disponible si Estás en modo horizontal que tenemos en modo vertical.

11
00:00:47,280 --> 00:00:53,730
El problema es que actualmente en la pantalla de inicio del juego cuando establecemos el ancho de nuestros botones

12
00:00:53,730 --> 00:00:59,970
que hacemos allí, usamos dimensiones get y esto y eso es muy importante a tener en cuenta, esto

13
00:00:59,970 --> 00:01:02,970
solo se calcula cuando se inicia la aplicación.

14
00:01:02,970 --> 00:01:08,220
Entonces, cuando la aplicación se inicia por primera vez, se observa el ancho disponible y, si se inicia

15
00:01:08,220 --> 00:01:08,910
en modo

16
00:01:08,910 --> 00:01:13,980
vertical, ese es el ancho del modo vertical, si se inicia en modo horizontal, es el ancho

17
00:01:13,980 --> 00:01:20,390
del modo horizontal y se registra y cuando luego gira el dispositivo y si luego lo gira, esto no se vuelve a calcular.

18
00:01:20,550 --> 00:01:25,970
Ahora, por supuesto, querrás que esto vuelva a calcular y hay una solución simple para eso.

19
00:01:26,100 --> 00:01:33,530
Si tiene un ancho o alto, cualquier cosa que obtenga de las dimensiones que debe respetar los cambios

20
00:01:33,570 --> 00:01:41,430
de orientación, por lo que debe recalcular cuando cambie la orientación, entonces no debe usar el ancho de las dimensiones

21
00:01:41,430 --> 00:01:50,250
allí abajo en su hoja de estilo, sino que debe administrar el ancho o cualquiera que sea la propiedad que pueda cambiar

22
00:01:50,570 --> 00:01:57,230
dinámicamente y que debería volver a representar la interfaz de usuario cuando cambie con el estado.

23
00:01:57,230 --> 00:02:00,960
Entonces, aquí en la cadena de inicio del juego,

24
00:02:01,130 --> 00:02:11,470
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

25
00:02:11,500 --> 00:02:18,290
obtener las dimensiones para obtener el ancho de la ventana dividido por cuatro, que es el

26
00:02:18,300 --> 00:02:21,220
valor predeterminado con el que comencé.

27
00:02:21,330 --> 00:02:27,660
Ahora puede configurar un oyente aquí en dimensiones, en lugar de usar get llamando a add event listener y escuchando el

28
00:02:28,020 --> 00:02:32,640
evento change que se activa cada vez que cambian las dimensiones, que suele ser el

29
00:02:32,640 --> 00:02:35,000
caso cuando el usuario gira el dispositivo.

30
00:02:35,010 --> 00:02:43,950
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

31
00:02:43,950 --> 00:02:50,760
ancho aquí, pero el ancho de las dimensiones será diferente en función del ancho de la pantalla cuando giremos y es esta

32
00:02:50,760 --> 00:02:52,470
función la que quiero

33
00:02:52,470 --> 00:02:58,020
llamar aquí, por lo que es el diseño de actualización que quiero llamar aquí sin paréntesis aquí porque

34
00:02:58,020 --> 00:03:02,430
solo queremos señalar esta función para que se llame cuando cambien las dimensiones y

35
00:03:02,460 --> 00:03:07,530
esto nos asegurará de que esto se vuelve a ejecutar cada vez que cambian nuestras dimensiones

36
00:03:07,830 --> 00:03:11,160
y, por lo tanto, este componente se volverá a representar.

37
00:03:11,160 --> 00:03:16,100
Ahora solo tenemos que asegurarnos de usar el botón recalculado dinámicamente con el estado aquí.

38
00:03:16,230 --> 00:03:20,130
Podemos hacer esto usando estilos en línea en lugar de un objeto de hoja de estilo.

39
00:03:20,130 --> 00:03:25,770
Ahora, si tenía otros estilos configurados para el botón que no dependen de las dimensiones, entonces podría dejarlos aquí

40
00:03:25,770 --> 00:03:28,170
en la hoja de estilos, por supuesto, en

41
00:03:28,170 --> 00:03:32,910
este caso no tengo eso, así que solo comentaré esto y luego podría fusionar eso con

42
00:03:32,910 --> 00:03:36,120
algunos estilos en línea. Aquí, dado que no tenemos

43
00:03:36,120 --> 00:03:41,550
otros estilos predeterminados, simplemente reemplazaré este objeto de hoja de estilo al que apuntamos con un objeto de estilo en

44
00:03:41,550 --> 00:03:47,070
línea donde establezco el ancho igual al ancho del botón y hago lo mismo, por supuesto, para mi segundo botón

45
00:03:47,130 --> 00:03:51,390
y con eso, ahora tiene un estilo que cambia cada vez que giramos el dispositivo.

46
00:03:51,390 --> 00:03:55,550
Entonces, si guardamos esto, verá que ahora se ve bien,

47
00:03:55,550 --> 00:04:00,350
no importa cómo rotamos esto, también en Android porque se vuelve a representar.

48
00:04:00,570 --> 00:04:07,050
Sin embargo, ahora una nota importante aquí, ahora mismo en el momento en que estoy configurando un grupo de oyentes de eventos aquí,

49
00:04:07,050 --> 00:04:11,670
siempre agrego un nuevo oyente de eventos cada vez que este componente se vuelve a procesar

50
00:04:11,670 --> 00:04:12,500
y eso

51
00:04:12,720 --> 00:04:19,320
no es lo que quiero hacer y podemos usar use efecto que también está integrado en React y que debe tener en cuenta

52
00:04:19,410 --> 00:04:23,540
para tener código que ejecutamos cada vez que nuestro componente se vuelve a representar.

53
00:04:23,620 --> 00:04:31,020
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

54
00:04:31,020 --> 00:04:36,210
final crea esta función de diseño de actualización aquí y agrega mi detector de eventos, así

55
00:04:36,270 --> 00:04:41,580
que cortaré esto y lo agregaré aquí en la función de efecto de uso y si luego

56
00:04:41,580 --> 00:04:46,950
devolvemos algo aquí en efecto de uso, esa es nuestra función de limpieza que se ejecuta justo

57
00:04:46,950 --> 00:04:54,940
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

58
00:04:54,950 --> 00:04:57,900
de escucha del evento para Actualización de diseño.

59
00:04:57,900 --> 00:05:02,840
Así que ahora limpiamos esto y configuramos uno nuevo cuando nuestro componente vuelve a renderizar, limpia el viejo, configura

60
00:05:02,840 --> 00:05:06,610
uno nuevo y, por lo tanto, siempre tenemos un escucha de eventos en ejecución.

61
00:05:06,770 --> 00:05:13,350
Si lo hacemos así, eso es simplemente más limpio y, por lo tanto, si ahora guardamos esto y volvemos, tenemos

62
00:05:13,350 --> 00:05:19,650
el mismo comportamiento que antes pero ahora de manera limpia al utilizar useState y use effect y lo más

63
00:05:19,950 --> 00:05:26,370
importante, las capacidades de escucha de eventos de las API de dimensiones que nos permiten no solo establecer dimensiones

64
00:05:26,610 --> 00:05:29,040
una vez, sino recalcularlas cuando cambian.