1
00:00:02,220 --> 00:00:08,250
Así que ahora con estos primeros pasos básicos tomados, si ahora completo un número aquí y continuamos, todo

2
00:00:08,250 --> 00:00:10,330
esto me parece bien aquí, todo

3
00:00:10,420 --> 00:00:12,980
funciona, si ahora comenzamos un juego, entonces

4
00:00:12,990 --> 00:00:19,560
también quiero reducir este espacio que tenemos aquí y también quiero asegurarme de que mi caja esté allí, así

5
00:00:19,560 --> 00:00:20,020
que

6
00:00:20,040 --> 00:00:23,240
este registro de conjeturas que tenemos, que esto también

7
00:00:23,250 --> 00:00:24,490
se ve mejor.

8
00:00:25,050 --> 00:00:29,820
Ahora, eso es algo que podemos hacer en la pantalla del juego, por supuesto, porque esa es la

9
00:00:29,820 --> 00:00:31,350
pantalla que estamos viendo allí.

10
00:00:31,410 --> 00:00:37,410
Ahora, por supuesto, es el espaciado, este margen superior en nuestro contenedor inferior que es este contenedor, el margen superior es esta distancia

11
00:00:37,590 --> 00:00:43,370
entre el número aquí y el contenedor y quiero cambiar esto. Ahora para cambiar esto, podemos

12
00:00:43,510 --> 00:00:44,720
usar

13
00:00:44,760 --> 00:00:47,120
nuevamente las dimensiones API.

14
00:00:47,280 --> 00:00:54,300
Entonces, aquí, importo nuevamente dimensiones de React Native y ahora allá

15
00:00:54,510 --> 00:01:03,630
abajo, podemos calcular este margen dinámicamente. Lo que podemos hacer aquí es que podemos obtener nuevamente las dimensiones de nuestra

16
00:01:03,870 --> 00:01:09,630
ventana y luego aquí, el ancho o, en este caso, probablemente la altura y luego dividir esto por algo,

17
00:01:09,630 --> 00:01:17,430
pero esto sería muy engorroso, podríamos dividir esto por 20 por ejemplo , a los 20 y ver si eso se ve bien, pero este

18
00:01:17,430 --> 00:01:21,990
es realmente un juego de adivinanzas, entonces, podría no ser lo que realmente queremos.

19
00:01:22,230 --> 00:01:28,320
En cambio, podríamos verificar cuánta altura tenemos disponible y luego usar un

20
00:01:28,320 --> 00:01:34,920
espaciado diferente en función de eso. Podríamos verificar si nuestra altura es mayor que 600, si ese es el caso,

21
00:01:35,310 --> 00:01:41,490
queremos tener un espacio de 20, de lo contrario, tenemos uno de 10. Por lo tanto, también podemos usar las dimensiones que

22
00:01:41,490 --> 00:01:46,920
estamos calculando en una condición if, en este caso en una expresión ternaria aquí, pero también

23
00:01:46,920 --> 00:01:49,890
podría usarlo en una comprobación if normal.

24
00:01:49,970 --> 00:01:56,300
Así que ahora podemos volver aquí y lo que vemos ahora es que cuando comenzamos el juego, no tenemos una gran

25
00:01:56,300 --> 00:02:01,580
brecha aquí en la pantalla más pequeña, en el iPhone, que es una pantalla más grande, sin embargo,

26
00:02:01,670 --> 00:02:05,960
definitivamente tenemos un espacio más grande y para verlo más claro, por supuesto, puede

27
00:02:06,050 --> 00:02:12,690
jugar con eso y, por ejemplo, usar 30 para pantallas más pequeñas y 30 para pantallas más grandes y 5 para pantallas más

28
00:02:12,800 --> 00:02:15,170
pequeñas y ahora definitivamente debería ver eso.

29
00:02:15,350 --> 00:02:17,680
Aquí tenemos una pequeña brecha

30
00:02:17,840 --> 00:02:20,450
y aquí, tenemos una brecha más grande.

31
00:02:20,750 --> 00:02:23,540
Por lo tanto, también podemos usar esto en condiciones if.

32
00:02:23,540 --> 00:02:29,060
Ahora con eso, volveré a configurar esto en 20 y 5 aquí, pero con suerte esto también muestra otra forma

33
00:02:29,060 --> 00:02:30,110
de usar esto.

34
00:02:30,110 --> 00:02:34,700
Puede usar esto en condiciones que, por supuesto, le dan mucha flexibilidad en los casos

35
00:02:34,700 --> 00:02:40,670
en que no desea usar el ancho en un cálculo dinámico pero tiene diferentes valores codificados que desea usar en

36
00:02:40,670 --> 00:02:46,730
función de los diferentes puntos de interrupción que desea establecido, un poco como lo sabe de CSS, donde también tiene

37
00:02:46,730 --> 00:02:51,080
consultas de medios y luego puede representar diferentes cosas en función de diferentes consultas

38
00:02:51,080 --> 00:02:51,830
de medios.

39
00:02:52,070 --> 00:02:57,740
Tampoco está restringido a usar las dimensiones API allí en su hoja de estilo, por supuesto, puede usarlo en cualquier lugar donde

40
00:02:57,740 --> 00:03:04,100
pueda usar Javascript, así que básicamente en todas partes en sus componentes. También puede adjuntar estilos totalmente diferentes según

41
00:03:04,130 --> 00:03:10,070
el ancho o la altura disponibles. También podríamos usar las dimensiones get

42
00:03:10,100 --> 00:03:18,050
window aquí donde asigno mi estilo y, por ejemplo, verifique mi altura aquí, verifique si es mayor a 600 y si

43
00:03:18,050 --> 00:03:25,400
ese es el caso, use el contenedor de botones de estilos y, de lo contrario, use el contenedor de

44
00:03:25,520 --> 00:03:31,520
botones de estilos pequeño si tuviéramos esto clase. No lo tengo aquí, así que lo eliminaré, pero esa es otra forma

45
00:03:31,670 --> 00:03:37,280
de usar esto, puede usarlo en cualquier lugar donde se ejecute Javascript. Por supuesto, también puede usarlo aquí, podría tener

46
00:03:37,280 --> 00:03:45,690
un check si justo aquí antes de devolver su código jsx y verificar la altura de la ventana, si es mayor que 600 y si ese

47
00:03:45,690 --> 00:03:49,830
es el caso, digamos, devuelve un código jsx totalmente diferente y, por lo

48
00:03:49,830 --> 00:03:55,910
tanto, este código a partir de entonces nunca se ejecutará si regresa aquí y solo si no lo hace

49
00:03:55,910 --> 00:03:57,230
en este caso,

50
00:03:57,230 --> 00:04:02,560
entonces si tiene un dispositivo que no es tan alto como este, entonces lo hace allí.

51
00:04:02,600 --> 00:04:09,260
Así que aquí eres realmente flexible y usas esa flexibilidad para crear los diseños que deseas porque de eso

52
00:04:09,410 --> 00:04:14,020
se trata y de lo que te brinda mucha flexibilidad para tus aplicaciones.

53
00:04:14,120 --> 00:04:15,440
Ese es el espacio

54
00:04:15,440 --> 00:04:19,210
aquí, ahora también quería cambiar mis elementos de registro allí, eso también es

55
00:04:19,340 --> 00:04:21,560
algo que podemos hacer fácilmente, por supuesto.

56
00:04:21,740 --> 00:04:28,400
Tenemos nuestros elementos de la lista allí y en los elementos de la lista, establecemos un ancho del 100% porque establecemos nuestro ancho de la lista

57
00:04:28,400 --> 00:04:32,330
aquí con el contenedor de la lista y eso se establece en el 60%.

58
00:04:32,600 --> 00:04:36,750
Ahora el 60% se ve bastante bien en dispositivos más grandes, creo, pero

59
00:04:36,910 --> 00:04:40,280
en dispositivos más pequeños, podríamos ir más grande que eso.

60
00:04:40,280 --> 00:04:48,050
Ahora, por supuesto, podemos intentar resolver esto con diferentes reglas aquí, donde establecemos un ancho máximo y un ancho mínimo

61
00:04:48,050 --> 00:04:55,370
y quizás también usemos las dimensiones API para calcular esto dinámicamente o nuevamente usemos una verificación if.

62
00:04:55,910 --> 00:05:03,500
Aquí podríamos decir nuevamente que las dimensiones obtienen ventana, obtienen el ancho disponible en este caso y

63
00:05:03,500 --> 00:05:07,340
si eso es, digamos, mayor que 500, entonces

64
00:05:07,340 --> 00:05:15,220
quiero usar 60%, de lo contrario quiero usar 80%. Así que ahora simplemente presentamos un contenedor de listas más amplio y más

65
00:05:15,220 --> 00:05:18,070
amplio basado en el ancho disponible en el dispositivo

66
00:05:18,250 --> 00:05:19,340
en el

67
00:05:19,420 --> 00:05:24,490
que nos estamos ejecutando y, de hecho, usemos 350 aquí en lugar de 500 porque estamos hablando

68
00:05:24,490 --> 00:05:26,350
del ancho, no de la altura.

69
00:05:26,380 --> 00:05:31,630
Ahora, si ejecutamos esto en el iPhone, tenemos el mismo ancho que antes, pero en la pantalla más

70
00:05:32,080 --> 00:05:33,820
pequeña, tenemos elementos más grandes.

71
00:05:33,820 --> 00:05:37,650
Entonces eso también es algo que podemos hacer y, por supuesto, puedes jugar con el punto

72
00:05:37,690 --> 00:05:39,140
de interrupción que estás estableciendo aquí.

73
00:05:39,160 --> 00:05:41,290
Puede probar diferentes tamaños de punto de interrupción aquí.

74
00:05:41,320 --> 00:05:43,420
Por supuesto, también podría tener múltiples

75
00:05:43,420 --> 00:05:48,940
puntos de interrupción, puede tener expresiones ternarias anidadas aquí o antes de escribir demasiadas expresiones anidadas, simplemente configure diferentes

76
00:05:48,940 --> 00:05:56,500
objetos de estilo aquí y luego cargue con diferentes cheques que use allí. Solo para darle un ejemplo de

77
00:05:56,500 --> 00:06:03,820
esto, podríamos tener un contenedor de lista grande aquí y allá, establecemos uno flexible y

78
00:06:03,820 --> 00:06:09,320
establecemos nuestro ancho de digamos 80% porque este es el grande

79
00:06:09,450 --> 00:06:13,380
y aquí tenemos el normal con 60% .

80
00:06:13,380 --> 00:06:18,400
Ahora no tengo ninguna condición, pero tengo dos objetos de estilo diferentes

81
00:06:18,400 --> 00:06:22,320
y ahora solo necesitamos adjuntar diferentes objetos de estilo

82
00:06:22,680 --> 00:06:31,780
allá arriba, no aquí, sino aquí, por supuesto, en esta vista. Bueno, para hacer esto, simplemente podemos configurar una variable de estilo de contenedor de lista

83
00:06:31,780 --> 00:06:38,740
aquí, por ejemplo, y señalar el contenedor de lista de estilos, que es nuestro valor predeterminado, pero luego agregar un check si aquí donde

84
00:06:38,830 --> 00:06:46,750
verificamos si las dimensiones obtienen el ancho de la ventana y ahora si el ancho aquí es decir, menor que 350, así que si tenemos un dispositivo pequeño,

85
00:06:46,750 --> 00:06:51,910
entonces queremos tener el contenedor de la lista grande, para que podamos establecer el estilo del contenedor de

86
00:06:51,910 --> 00:06:53,470
la lista, esta variable

87
00:06:53,470 --> 00:06:55,960
igual al contenedor de la lista de estilos

88
00:06:55,960 --> 00:07:01,960
grande para apuntar a este objeto de estilo y ahora podemos usar ese objeto de estilo aquí en la vista donde

89
00:07:01,960 --> 00:07:07,180
necesitamos el estilo de contenedor de lista, ahora usamos la variable que contiene un objeto de estilo de

90
00:07:07,330 --> 00:07:13,060
contenedor de lista diferente según el ancho de nuestro dispositivo. Y si ahora guardamos esto y lo ejecutamos nuevamente,

91
00:07:13,060 --> 00:07:19,270
verá que en el iPhone con el dispositivo más grande donde tenemos más ancho, tenemos el contenedor más pequeño y aquí

92
00:07:19,270 --> 00:07:24,200
en el teléfono Android con el dispositivo más pequeño, con menos ancho, obtenemos El contenedor más grande.

93
00:07:24,280 --> 00:07:26,980
Por lo tanto, es el mismo resultado que

94
00:07:27,070 --> 00:07:32,080
antes pero un poco más legible y ahora podríamos tener múltiples, por ejemplo, si verificamos aquí dónde

95
00:07:32,080 --> 00:07:34,900
almacenamos diferentes estilos aquí en el estilo de contenedor de

96
00:07:34,900 --> 00:07:42,070
lista que luego usamos allí, esto puede ser más legible que tener expresiones ternarias anidadas ahí abajo en tu objeto de hoja de estilo.

97
00:07:42,070 --> 00:07:47,650
Así es como puedes jugar con eso y ser consciente de esa flexibilidad de las dimensiones API es

98
00:07:47,770 --> 00:07:48,970
realmente crucial aquí.