1 00:00:02,230 --> 00:00:08,100 En esta conferencia, quiero profundizar un poco más en flexbox, especialmente en cuanto a cómo lo usas en las aplicaciones React 2 00:00:08,110 --> 00:00:08,690 Native. 3 00:00:08,710 --> 00:00:12,310 Si ya lo sabe todo, por supuesto, puede omitir esta conferencia. 4 00:00:12,340 --> 00:00:14,920 Entonces, para esto, preparé una aplicación ficticia simple y, por supuesto, la encuentras 5 00:00:14,920 --> 00:00:20,420 adjunta, es una aplicación React Native normal construida con expo y en la aplicación. js aquí, lo que tengo al 6 00:00:20,460 --> 00:00:26,890 final es solo una vista con tres vistas allí donde cada vista tiene un texto con el 7 00:00:26,890 --> 00:00:29,990 texto uno, dos, tres, esto simplemente crea algunos 8 00:00:30,010 --> 00:00:36,310 cuadros con diferentes colores: rojo, azul y verde y ahora utilizaremos flexbox para mover estas cajas 9 00:00:36,310 --> 00:00:41,950 para que pueda tener una idea de cómo funciona flexbox porque es muy importante. 10 00:00:42,240 --> 00:00:43,240 Ahora lo 11 00:00:43,660 --> 00:00:49,120 primero es lo primero, de manera predeterminada, cada vista en React Native, incluso si 12 00:00:49,120 --> 00:00:55,410 no asigna estilos especiales, utiliza flexbox y eso es diferente a la web, por ejemplo, si tiene 13 00:00:55,420 --> 00:01:01,370 un div que sería equivalente a un tipo de vista, no No use flexbox por defecto. 14 00:01:01,450 --> 00:01:08,260 En React Native, lo hace, cada vista organiza por defecto a sus hijos con la ayuda de esta cosa 15 00:01:08,350 --> 00:01:15,490 de flexbox, flexbox simplemente es un término, es simplemente un concepto de CSS que se trata de organizar elementos secundarios en 16 00:01:15,520 --> 00:01:17,440 un espacio unidimensional, así que 17 00:01:17,440 --> 00:01:21,990 aquí por ejemplo en una columna. Ese es también otro valor predeterminado, no 18 00:01:21,990 --> 00:01:29,340 solo todas las vistas usan flexbox de manera predeterminada, sino que también organiza de manera predeterminada a los niños en una columna, 19 00:01:29,340 --> 00:01:33,020 de arriba a abajo. Eso también es una diferencia para la 20 00:01:33,020 --> 00:01:37,350 web y no quiero enfatizar demasiado estas diferencias porque, por supuesto, no es necesario ser un desarrollador 21 00:01:37,350 --> 00:01:42,400 web para crear aplicaciones React Native, pero creo que mucha gente conoce el desarrollo web, si conoce CSS flexbox y, 22 00:01:42,400 --> 00:01:47,400 por lo tanto, tiene sentido hablar también de las diferencias. Entonces, en la web cuando usa flexbox, 23 00:01:47,400 --> 00:01:48,840 no solo no 24 00:01:48,840 --> 00:01:51,220 está activado de manera predeterminada, además si 25 00:01:51,240 --> 00:01:56,820 lo activa, lo predeterminado es organizar todos los elementos secundarios en una fila y aquí, lo 26 00:01:56,820 --> 00:01:59,010 predeterminado es organizarlos en un columna. 27 00:01:59,010 --> 00:02:05,910 Sin embargo, puede cambiar ese valor predeterminado, por lo que en este caso en la vista que contiene mis cuadros, 28 00:02:05,910 --> 00:02:12,960 agregando aquí la dirección de flexión y configurando esto en fila, ahora verá que estos tres cuadros están organizados en una 29 00:02:12,960 --> 00:02:16,560 fila de izquierda a derecha. Ahora, además de fila y 30 00:02:16,560 --> 00:02:19,250 columna, también tiene fila inversa y columna inversa y 31 00:02:19,260 --> 00:02:21,720 esto simplemente también hace lo que el nombre implica. 32 00:02:21,720 --> 00:02:29,010 Ahora todavía tenemos una fila, pero el primer elemento, el cuadro rojo en realidad está a la derecha y ya no está a la izquierda, 33 00:02:29,010 --> 00:02:30,820 así que eso también es 34 00:02:30,840 --> 00:02:36,210 algo que puedes hacer, déjame volver a la fila. Eso es lo primero que puedes hacer. 35 00:02:36,210 --> 00:02:42,750 Otra cosa importante sobre flexbox es cómo se dimensionan los elementos secundarios, aquí le di a 36 00:02:42,810 --> 00:02:47,040 cada elemento secundario un ancho y una altura de 100. 37 00:02:47,070 --> 00:02:54,660 Ahora, si quitáramos esa cosa de ancho y alto en cada elemento hijo, verán que ahora tenemos una fila muy 38 00:02:54,660 --> 00:03:01,890 pequeña aquí porque cada cuadro ahora es tan ancho como su hijo lo requiere y solo tan alto como 39 00:03:01,890 --> 00:03:05,700 su hijo requiere que sea, por lo que cada 40 00:03:05,700 --> 00:03:11,180 caja que contiene un número es tan ancha y alta como el número que contiene. 41 00:03:11,340 --> 00:03:18,180 Ahora puede cambiar eso también con el contenedor de Flexbox que lo rodea. Digamos que un ancho de digamos 300 píxeles 42 00:03:18,330 --> 00:03:22,740 o del 80% del ancho principal, así que en este caso, 43 00:03:22,740 --> 00:03:28,950 dado que es el elemento raíz, del ancho del dispositivo y le damos una altura de 44 00:03:29,020 --> 00:03:30,230 digamos 300. 45 00:03:30,480 --> 00:03:36,720 Si hacemos eso y ahora es realmente importante, lo estoy haciendo en la vista que contiene todos estos cuadros, no 46 00:03:36,720 --> 00:03:39,380 lo estoy haciendo en los cuadros en sí. 47 00:03:39,480 --> 00:03:45,050 Entonces, si asignamos este ancho y alto en el cuadro circundante, verá algo interesante, se 48 00:03:45,150 --> 00:03:48,250 asume el alto para todos los elementos, ahora 49 00:03:48,270 --> 00:03:54,810 todas las vistas en el cuadro flexible toman el alto del padre, el ancho no tiene impacto aquí. 50 00:03:54,870 --> 00:03:59,510 Ese también es un comportamiento predeterminado que tienes aquí, obviamente ya que no hemos cambiado nada. 51 00:03:59,760 --> 00:04:06,840 El comportamiento predeterminado aquí es que los elementos secundarios en una caja flexible, por lo tanto, 52 00:04:06,850 --> 00:04:15,360 en esta vista externa aquí, están organizados de manera que se alineen a lo largo del eje transversal al estirar. 53 00:04:15,490 --> 00:04:20,510 Bien, eso eran muchos términos, ¿qué significa esto? Ahora, cuando trabajamos 54 00:04:20,530 --> 00:04:29,290 con flexbox, tenemos dos ejes importantes. El eje principal depende de su dirección de flexión, para una fila que tenemos aquí, 55 00:04:29,350 --> 00:04:37,690 fila de dirección de flexión, el eje principal es de izquierda a derecha. Para el reverso de la fila, sería de derecha a izquierda, para la columna, sería de 56 00:04:37,690 --> 00:04:42,570 arriba a abajo y para el reverso de la columna, sería de abajo hacia arriba, así que ese 57 00:04:42,580 --> 00:04:44,270 es el eje principal y 58 00:04:44,620 --> 00:04:48,630 luego también tiene un eje transversal y eso es simplemente lo contrario del eje principal. 59 00:04:48,640 --> 00:04:56,110 Entonces, para una fila donde el eje principal es de izquierda a derecha, el eje transversal sería de arriba a abajo. Si el eje principal es de derecha a izquierda, 60 00:04:56,110 --> 00:05:01,900 como sería el caso de la fila inversa, entonces el eje transversal sería de abajo 61 00:05:01,900 --> 00:05:03,100 hacia arriba. 62 00:05:03,340 --> 00:05:06,940 Bien, ese es el concepto de eje principal y eje transversal. 63 00:05:06,940 --> 00:05:13,060 Ahora puede organizar sus elementos secundarios, por lo que en esta vista donde tenemos los tres cuadros como elementos secundarios, 64 00:05:13,360 --> 00:05:20,170 puede organizar estos elementos secundarios a lo largo de este eje. Utiliza contenido de justificación para organizar elementos 65 00:05:20,200 --> 00:05:27,760 a lo largo del eje principal y tiene elementos de alineación para organizar elementos alrededor del eje transversal. 66 00:05:27,760 --> 00:05:31,040 Ahora puede ver los valores que obtuvo para justificar el contenido aquí si agrega estas 67 00:05:31,090 --> 00:05:37,230 citas o si coloca el cursor allí y presiona el espacio de control. Verá que puede centrar elementos, puede colocarlos 68 00:05:37,230 --> 00:05:44,040 al final o al comienzo de ese contenedor o puede agregar algo de espacio en el 69 00:05:44,040 --> 00:05:45,270 medio, por 70 00:05:45,300 --> 00:05:52,500 ejemplo, si usamos espacio entre aquí y usamos alinear el centro del elemento, entonces las cosas cambiarán. 71 00:05:52,500 --> 00:05:57,490 Ahora verá que toma el ancho del contenedor circundante, cada caja en sí misma 72 00:05:57,540 --> 00:06:03,360 es bastante pequeña, pero están divididas o distribuidas en el ancho del contenedor principal y ya 73 00:06:03,360 --> 00:06:09,570 no toman la altura porque a lo largo de la cruz eje, los estamos alineando con elementos 74 00:06:09,570 --> 00:06:12,960 de alineación y allí, configuré esto al centro. 75 00:06:13,020 --> 00:06:19,620 El valor predeterminado aquí es estirar y si lo configuro nuevamente para estirar, entonces, como era de esperar, lo hacen 76 00:06:19,620 --> 00:06:20,960 para toda la altura. 77 00:06:20,970 --> 00:06:26,490 Ahora, si desea asegurarse de que tengan el ancho disponible, no puede establecer el estiramiento aquí para 78 00:06:26,490 --> 00:06:32,820 justificar el contenido, que es su vehículo de posicionamiento del eje principal, por lo que no puede configurar el estiramiento aquí. 79 00:06:32,980 --> 00:06:35,880 Entonces, ¿qué puedes hacer con respecto a eso entonces? 80 00:06:35,890 --> 00:06:40,780 Bueno, eso es algo que ahora configura en cada elemento secundario en sí. 81 00:06:40,810 --> 00:06:50,290 Puede decirle a un elemento secundario cuánto espacio debería quitar del espacio que potencialmente está recibiendo. Estirar aquí es una especie de caso especial, allí configura 82 00:06:50,290 --> 00:06:54,220 esto en el elemento principal, normalmente lo configura 83 00:06:54,220 --> 00:06:56,640 en el elemento secundario. 84 00:06:56,680 --> 00:07:02,200 Entonces, por ejemplo, si configuro esto en el centro ahora para que el padre no le 85 00:07:02,200 --> 00:07:08,950 diga al niño cuánto espacio debe ocupar, entonces podemos controlar completamente el espacio que ocupa un niño yendo al 86 00:07:08,950 --> 00:07:17,410 estilo infantil y allí, puede agregar flex , la propiedad flex. La propiedad flex se aplica a los elementos que están dentro de un flexbox, 87 00:07:17,410 --> 00:07:19,730 por lo que están dentro de una vista 88 00:07:19,810 --> 00:07:25,660 en este caso aquí y eso puede ser una vista en sí misma, pero también podría ser otro componente como 89 00:07:25,660 --> 00:07:27,150 un texto, por ejemplo. 90 00:07:27,160 --> 00:07:31,320 Así que ahora aquí, puede agregar flex y puede establecerlo en un valor de uno, 91 00:07:31,330 --> 00:07:35,940 por ejemplo, flex debe ser un número. Si configura esto en uno, lo que 92 00:07:35,950 --> 00:07:44,050 verá es que ahora el contenedor rojo donde configuré flex a 1 toma todo el ancho disponible que puede obtener tanto que 93 00:07:44,110 --> 00:07:50,440 deja suficiente espacio para el contenedor azul y el verde para que puedan puede exprimir su contenido 94 00:07:50,620 --> 00:07:52,470 en el flexbox circundante. 95 00:07:52,480 --> 00:07:58,360 Ahora no podemos ver los límites del contenedor circundante, pero los límites serían esencialmente donde comienza el elemento 96 00:07:58,600 --> 00:08:03,060 rojo y el elemento verde y así en el eje horizontal aquí. 97 00:08:04,720 --> 00:08:11,020 Así que ahora flex one se asegura de que el elemento rojo sea lo más grande posible, por 98 00:08:11,170 --> 00:08:17,140 lo que ocupa tanto espacio como sea posible. De forma predeterminada, las vistas solo ocupan tanto espacio como requieren 99 00:08:17,140 --> 00:08:17,690 sus 100 00:08:17,710 --> 00:08:24,040 elementos secundarios, por lo que este carácter lo requiere, pero con Flex One, cambia esto y ahora ocupan tanto espacio a lo largo 101 00:08:24,040 --> 00:08:25,140 del eje principal, así 102 00:08:25,150 --> 00:08:29,140 como a lo ancho aquí, como pueden obtener. Para el eje cruzado, nuevamente es 103 00:08:29,140 --> 00:08:34,310 un caso especial, debe hacer esto en el padre. Para el eje principal y dado que tenemos 104 00:08:34,360 --> 00:08:38,790 una fila aquí, el eje principal es un eje horizontal de izquierda a derecha, puede 105 00:08:38,800 --> 00:08:41,520 hacerlo con la propiedad flex en un elemento secundario. 106 00:08:42,700 --> 00:08:48,550 Ahora, por supuesto, también puede agregar flex a otros elementos secundarios, como ese segundo al contenedor azul 107 00:08:48,550 --> 00:08:50,260 con los dos allí, 108 00:08:50,260 --> 00:08:52,420 también puede agregar flex uno allí. 109 00:08:52,420 --> 00:08:56,690 Así que ahora tengo uno flexible en el contenedor rojo y uno flexible 110 00:08:56,710 --> 00:09:03,790 en el contenedor azul y lo que sucede ahora es que ambos ocupan el espacio libre disponible y entre estas dos cajas, 111 00:09:03,790 --> 00:09:08,870 el espacio se distribuye de manera uniforme y eso es lo que indica este número aquí. 112 00:09:08,930 --> 00:09:11,210 Este número es un número 113 00:09:11,210 --> 00:09:18,350 relativo, todos los elementos en el mismo flexbox, con la propiedad flex distribuyen el espacio disponible al considerar 114 00:09:18,410 --> 00:09:23,130 el número que asigna aquí y estos números son relativos entre sí. 115 00:09:23,140 --> 00:09:29,800 Entonces, si le doy al contenedor azul flex dos aquí, entonces esto significa que del espacio disponible que 116 00:09:29,950 --> 00:09:36,100 tiene en ese contenedor circundante, después de deducir el espacio que cada elemento necesita para exprimir su 117 00:09:36,100 --> 00:09:36,840 contenido 118 00:09:36,970 --> 00:09:42,480 allí, el contenedor azul ocupará el doble de espacio que este porque aquí tenemos flex 119 00:09:42,490 --> 00:09:43,760 uno, aquí tenemos 120 00:09:43,810 --> 00:09:50,560 flex dos, si tuviéramos flex tres aquí, entonces esto tomaría tres quintos del espacio libre disponible porque tenemos tres 121 00:09:50,560 --> 00:09:52,150 más dos, por lo 122 00:09:52,210 --> 00:09:58,300 que tenemos 5 segmentos disponibles, por así decirlo y aquí el contenedor rojo tomaría 3 segmentos, el 123 00:09:58,300 --> 00:09:59,950 contenedor azul tomaría 2 segmentos. 124 00:09:59,950 --> 00:10:05,950 Si tenemos 1 y 2, entonces tenemos tres segmentos disponibles y el contenedor azul toma dos de 125 00:10:06,070 --> 00:10:13,510 ellos, el rojo toma uno, por lo que siempre sumas estos números flexibles y luego los distribuyes o eso se hace automáticamente, 126 00:10:13,510 --> 00:10:17,680 por supuesto, pero luego se distribuye el espacio disponible en consecuencia. 127 00:10:17,680 --> 00:10:22,660 Así que ahora aquí, veremos que el contenedor azul es dos veces más grande que el rojo o ocupa 128 00:10:22,660 --> 00:10:25,090 el doble de espacio libre que el rojo. 129 00:10:25,090 --> 00:10:27,090 Así es como puede trabajar 130 00:10:27,130 --> 00:10:33,760 con flex, puede organizar cómo se posicionan los elementos con la dirección flex, con contenido justificado y con elementos alineados, 131 00:10:33,790 --> 00:10:39,370 y también puede hacer que sus elementos crezcan y se reduzcan con la ayuda de flex. 132 00:10:39,430 --> 00:10:44,490 Así que ahora es una breve introducción a flexbox en React Native, como dije 133 00:10:44,560 --> 00:10:51,070 inspirado en Flexbox para CSS, así que si sabías eso, todo lo que expliqué aquí probablemente no sea 134 00:10:51,070 --> 00:10:52,280 nuevo para ti. 135 00:10:52,450 --> 00:10:54,610 Trabajaremos con flexbox a lo largo de 136 00:10:54,610 --> 00:10:58,900 este curso, por lo que las cosas también se aclararán y trabajaremos mucho con 137 00:10:58,930 --> 00:11:05,170 él y verás cómo puedes crear hermosas interfaces de usuario con flexbox, flexbox al final es la herramienta en React Nativo 138 00:11:05,170 --> 00:11:10,570 para estructurar su contenido en una página, para organizar su contenido y, por lo general, trabajará con muchas 139 00:11:10,570 --> 00:11:15,190 vistas que también se anidan entre sí para que pueda colocar los elementos de la 140 00:11:15,190 --> 00:11:16,720 manera que desee, por 141 00:11:16,840 --> 00:11:21,680 supuesto, y eso también es importante. No solo tiene que tener una vista en su aplicación 142 00:11:21,730 --> 00:11:26,050 que use flexbox, podría tener otra vista allí que también use flexbox y, como 143 00:11:26,050 --> 00:11:31,570 mencioné, cada vista por defecto usa flexbox y luego puede anidar estas vistas entre sí para que coloca 144 00:11:31,600 --> 00:11:35,070 todo de la manera que desee y también verá esto en 145 00:11:35,140 --> 00:11:41,200 este módulo y, de hecho, ya lo estoy haciendo aquí. En mis vistas aquí, que están en la vista circundante, 146 00:11:41,200 --> 00:11:47,710 así que mis cuadros aquí, allí también uso justificar contenido y alinear elementos para centrar mis números en estos cuadros, de 147 00:11:47,710 --> 00:11:54,070 modo que 1, 2 y 3 estén centrados allí horizontal y verticalmente y eso funciona porque tenemos flexbox activado de forma 148 00:11:54,070 --> 00:12:00,700 predeterminada y no podemos desactivarlo por cierto, por lo tanto, solo uso estas dos propiedades aquí para alinear mi contenido de esta 149 00:12:00,700 --> 00:12:08,320 vista a lo largo del eje principal y el eje transversal y aquí ya que no configuré ningún flex especial En esta dirección, el eje 150 00:12:08,320 --> 00:12:14,170 principal es de arriba a abajo porque la dirección de flexión predeterminada es la columna y el eje transversal 151 00:12:14,530 --> 00:12:16,420 es de izquierda a derecha. 152 00:12:16,420 --> 00:12:17,440 Eso es solo una nota al margen.