1
00:00:02,240 --> 00:00:04,430
Ahora, esta también es una buena práctica

2
00:00:04,460 --> 00:00:09,440
para usted, puede pausar el video aquí e intentar colocar estos dos botones uno al lado del otro, solo los

3
00:00:09,440 --> 00:00:15,190
dos botones, no la entrada y los dos botones, pero estos dos botones deben estar en un nueva línea debajo de la entrada

4
00:00:15,200 --> 00:00:17,430
pero luego se sientan uno al lado del otro.

5
00:00:17,570 --> 00:00:23,610
Después de la breve pausa que puede usar para pausar el video, por supuesto lo haremos juntos.

6
00:00:23,650 --> 00:00:25,440
¿Tuviste éxito?

7
00:00:25,450 --> 00:00:26,950
Probémoslo juntos.

8
00:00:26,990 --> 00:00:34,670
La clave aquí es usar flexbox y otra vista porque nuevamente, como mencioné anteriormente y como es realmente importante entender,

9
00:00:34,670 --> 00:00:41,530
los componentes de vista son su componente principal para organizar otros componentes o para usarse como un contenedor

10
00:00:41,530 --> 00:00:43,570
que también puede diseñar pero

11
00:00:43,600 --> 00:00:49,610
aquí en este caso, para organizar otros componentes. Así que moveré los dos botones dentro de

12
00:00:49,720 --> 00:00:55,720
esa vista y ahora podemos asignar un estilo a esa vista y ese estilo, por supuesto,

13
00:00:55,750 --> 00:00:59,660
se definirá aquí en nuestro objeto de estilo y nombraré este

14
00:00:59,710 --> 00:01:06,400
contenedor de botones, esto depende de usted, este nombre y allí, quiero establecer una dirección de fila flexible

15
00:01:06,400 --> 00:01:13,360
para que se sienten uno al lado del otro y luego, estableceré el contenido de espacio justificado para tener

16
00:01:13,360 --> 00:01:16,330
el espacio libre entre los dos botones.

17
00:01:16,340 --> 00:01:25,190
Ahora agreguemos el estilo aquí a esa vista, el contenedor de botones de estilos y guardemos esto y ahora aquí están los

18
00:01:25,190 --> 00:01:32,420
botones, pero para que el espacio libre tenga un efecto aquí, que por cierto será aún más claro

19
00:01:32,420 --> 00:01:34,900
en Android, que actualmente no

20
00:01:35,000 --> 00:01:37,880
tiene ningún efecto, para que el espacio

21
00:01:37,910 --> 00:01:41,820
entre no tenga ningún efecto, permítanme mostrarlo rápidamente en Android.

22
00:01:42,030 --> 00:01:42,410
Ya

23
00:01:42,420 --> 00:01:43,890
ves, no hay espacio libre.

24
00:01:43,920 --> 00:01:47,790
La razón de esto simplemente es que no tenemos un ancho asignado a nuestro contenedor de botones y,

25
00:01:47,790 --> 00:01:48,200
por

26
00:01:48,210 --> 00:01:50,100
lo tanto, como aprendió, solo toma el ancho

27
00:01:50,370 --> 00:01:52,660
de los elementos secundarios y ese es simplemente el ancho de

28
00:01:52,710 --> 00:01:53,820
los dos botones agregados juntos,

29
00:01:53,940 --> 00:01:56,570
por lo tanto, no hay espacio libre para agregar en el medio.

30
00:01:56,610 --> 00:02:01,410
Por lo tanto, tenemos algo de espacio libre en el medio, simplemente necesitamos asignar un con al contenedor de

31
00:02:01,530 --> 00:02:05,800
botones y ahora ese ancho depende de usted. Dado que la entrada tiene 80%,

32
00:02:05,820 --> 00:02:14,340
podríamos ir con 80% aquí también o tal vez con 60% para tener un poco más estrecho que la entrada anterior, para que los

33
00:02:14,400 --> 00:02:20,130
botones no se asienten en los bordes de la entrada, pero eso es de Por supuesto,

34
00:02:20,130 --> 00:02:21,090
depende

35
00:02:21,090 --> 00:02:27,060
de usted y, por lo tanto, ahora con eso, si esto se recarga y miramos esto

36
00:02:27,060 --> 00:02:33,390
en Android al usar esta forma conveniente de cerrarlo y reiniciarlo, ahora deberíamos ver algo de espacio libre

37
00:02:33,390 --> 00:02:34,930
entre estos dos botones,

38
00:02:34,950 --> 00:02:36,730
sí, eso se ve bien.

39
00:02:36,770 --> 00:02:38,700
Y, por supuesto, puede jugar con

40
00:02:38,730 --> 00:02:42,830
eso, también podría, por supuesto, agregar estilos a los botones, puede agregar accesorios

41
00:02:42,840 --> 00:02:49,440
de estilo aquí también y agregar un margen a la izquierda y a la derecha de cada botón, eso también

42
00:02:49,440 --> 00:02:50,510
habría funcionado.

43
00:02:50,520 --> 00:02:56,250
También puede jugar con otros valores aquí, como espacio alrededor para tener el espacio libre a la izquierda y derecha

44
00:02:56,250 --> 00:02:58,710
de los botones y no solo entre ellos.

45
00:02:58,770 --> 00:03:03,000
Estas son todas las cosas que puedes hacer, iré con espacio por aquí y echaré un vistazo final a

46
00:03:03,000 --> 00:03:06,000
esto, pero en última instancia, eso es simplemente algo que depende de ti.

47
00:03:06,030 --> 00:03:11,400
Por supuesto, aquí es importante que comprenda cómo puede lograr algo con la ayuda de

48
00:03:11,550 --> 00:03:15,390
una vista que envuelve sus botones y flexbox y, con

49
00:03:15,600 --> 00:03:18,900
eso, diría que tenemos un aspecto decente aquí.

50
00:03:19,110 --> 00:03:26,550
Ahora, una última cosa, lo último que todavía quiero hacer es cambiar el tamaño de estos botones porque no tienen el mismo

51
00:03:26,550 --> 00:03:31,380
tamaño y creo que se vería un poco mejor si tuvieran el mismo tamaño.

52
00:03:31,410 --> 00:03:37,920
Ahora en un botón, no puede agregar un accesorio de estilo y establecer un ancho, no importa si está utilizando

53
00:03:37,950 --> 00:03:40,700
estilos en línea o el objeto de

54
00:03:40,710 --> 00:03:44,050
hoja de estilo, y eso es algo que debe saber,

55
00:03:44,100 --> 00:03:51,860
por eso lo estoy cubriendo aquí, tiene que ajustar su botón en una vista separada, como lo estoy haciendo aquí y luego darle un

56
00:03:52,070 --> 00:03:59,270
botón a esa vista, por ejemplo, aquí podríamos agregar un botón de estilos, refiriéndonos a una propiedad del botón, a cada vista

57
00:03:59,270 --> 00:04:05,990
y allí en este propiedad del botón que ahora estoy agregando, podría agregar un ancho de digamos 40% y ese será

58
00:04:05,990 --> 00:04:08,780
el 40% del padre de esa vista, por

59
00:04:08,780 --> 00:04:15,440
lo que el 40% de esa vista de contenedor de botones que en sí misma toma el 60% del ancho

60
00:04:16,220 --> 00:04:20,580
total disponible y podemos hacer esto en el otro botón también, por supuesto.

61
00:04:20,600 --> 00:04:28,010
Así que eso es algo que debe saber, si agrega sus vistas circundantes aquí, alrededor de sus botones.

62
00:04:28,010 --> 00:04:34,490
Ahora con eso, si reiniciamos Android nuevamente, deberíamos tener botones del mismo tamaño que, por supuesto, a

63
00:04:34,580 --> 00:04:36,710
menudo es algo que desea.

64
00:04:36,710 --> 00:04:42,980
Por supuesto, también podría haber usado un valor de píxel aquí en lugar de valores de porcentaje, pero ahora con eso,

65
00:04:43,220 --> 00:04:44,710
estoy muy feliz, creo

66
00:04:44,780 --> 00:04:48,590
que ahora es realmente una aplicación que se ve bien, se comporta bien

67
00:04:48,710 --> 00:04:51,320
y sí, es un buen comienzo con React Native.

68
00:04:51,320 --> 00:04:57,140
Ahora, obviamente, hay mucho más que podemos aprender y profundizaremos, mucho más que podemos hacer con respecto

69
00:04:57,140 --> 00:05:02,540
al estilo porque, como ya se mencionó, esta no es la aplicación más hermosa que

70
00:05:03,110 --> 00:05:05,990
hayas creado, pero cubrimos muchos fundamentos importantes aquí.