En esta conferencia, quiero profundizar un poco más en flexbox, especialmente en cuanto a cómo lo usas en las aplicaciones React
Native.
Si ya lo sabe todo, por supuesto, puede omitir esta conferencia.
Entonces, para esto, preparé una aplicación ficticia simple y, por supuesto, la encuentras
adjunta, es una aplicación React Native normal construida con expo y en la aplicación. js aquí, lo que tengo al
final es solo una vista con tres vistas allí donde cada vista tiene un texto con el
texto uno, dos, tres, esto simplemente crea algunos
cuadros con diferentes colores: rojo, azul y verde y ahora utilizaremos flexbox para mover estas cajas
para que pueda tener una idea de cómo funciona flexbox porque es muy importante.
Ahora lo
primero es lo primero, de manera predeterminada, cada vista en React Native, incluso si
no asigna estilos especiales, utiliza flexbox y eso es diferente a la web, por ejemplo, si tiene
un div que sería equivalente a un tipo de vista, no No use flexbox por defecto.
En React Native, lo hace, cada vista organiza por defecto a sus hijos con la ayuda de esta cosa
de flexbox, flexbox simplemente es un término, es simplemente un concepto de CSS que se trata de organizar elementos secundarios en
un espacio unidimensional, así que
aquí por ejemplo en una columna. Ese es también otro valor predeterminado, no
solo todas las vistas usan flexbox de manera predeterminada, sino que también organiza de manera predeterminada a los niños en una columna,
de arriba a abajo. Eso también es una diferencia para la
web y no quiero enfatizar demasiado estas diferencias porque, por supuesto, no es necesario ser un desarrollador
web para crear aplicaciones React Native, pero creo que mucha gente conoce el desarrollo web, si conoce CSS flexbox y,
por lo tanto, tiene sentido hablar también de las diferencias. Entonces, en la web cuando usa flexbox,
no solo no
está activado de manera predeterminada, además si
lo activa, lo predeterminado es organizar todos los elementos secundarios en una fila y aquí, lo
predeterminado es organizarlos en un columna.
Sin embargo, puede cambiar ese valor predeterminado, por lo que en este caso en la vista que contiene mis cuadros,
agregando aquí la dirección de flexión y configurando esto en fila, ahora verá que estos tres cuadros están organizados en una
fila de izquierda a derecha. Ahora, además de fila y
columna, también tiene fila inversa y columna inversa y
esto simplemente también hace lo que el nombre implica.
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,
así que eso también es
algo que puedes hacer, déjame volver a la fila. Eso es lo primero que puedes hacer.
Otra cosa importante sobre flexbox es cómo se dimensionan los elementos secundarios, aquí le di a
cada elemento secundario un ancho y una altura de 100.
Ahora, si quitáramos esa cosa de ancho y alto en cada elemento hijo, verán que ahora tenemos una fila muy
pequeña aquí porque cada cuadro ahora es tan ancho como su hijo lo requiere y solo tan alto como
su hijo requiere que sea, por lo que cada
caja que contiene un número es tan ancha y alta como el número que contiene.
Ahora puede cambiar eso también con el contenedor de Flexbox que lo rodea. Digamos que un ancho de digamos 300 píxeles
o del 80% del ancho principal, así que en este caso,
dado que es el elemento raíz, del ancho del dispositivo y le damos una altura de
digamos 300.
Si hacemos eso y ahora es realmente importante, lo estoy haciendo en la vista que contiene todos estos cuadros, no
lo estoy haciendo en los cuadros en sí.
Entonces, si asignamos este ancho y alto en el cuadro circundante, verá algo interesante, se
asume el alto para todos los elementos, ahora
todas las vistas en el cuadro flexible toman el alto del padre, el ancho no tiene impacto aquí.
Ese también es un comportamiento predeterminado que tienes aquí, obviamente ya que no hemos cambiado nada.
El comportamiento predeterminado aquí es que los elementos secundarios en una caja flexible, por lo tanto,
en esta vista externa aquí, están organizados de manera que se alineen a lo largo del eje transversal al estirar.
Bien, eso eran muchos términos, ¿qué significa esto? Ahora, cuando trabajamos
con flexbox, tenemos dos ejes importantes. El eje principal depende de su dirección de flexión, para una fila que tenemos aquí,
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
arriba a abajo y para el reverso de la columna, sería de abajo hacia arriba, así que ese
es el eje principal y
luego también tiene un eje transversal y eso es simplemente lo contrario del eje principal.
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,
como sería el caso de la fila inversa, entonces el eje transversal sería de abajo
hacia arriba.
Bien, ese es el concepto de eje principal y eje transversal.
Ahora puede organizar sus elementos secundarios, por lo que en esta vista donde tenemos los tres cuadros como elementos secundarios,
puede organizar estos elementos secundarios a lo largo de este eje. Utiliza contenido de justificación para organizar elementos
a lo largo del eje principal y tiene elementos de alineación para organizar elementos alrededor del eje transversal.
Ahora puede ver los valores que obtuvo para justificar el contenido aquí si agrega estas
citas o si coloca el cursor allí y presiona el espacio de control. Verá que puede centrar elementos, puede colocarlos
al final o al comienzo de ese contenedor o puede agregar algo de espacio en el
medio, por
ejemplo, si usamos espacio entre aquí y usamos alinear el centro del elemento, entonces las cosas cambiarán.
Ahora verá que toma el ancho del contenedor circundante, cada caja en sí misma
es bastante pequeña, pero están divididas o distribuidas en el ancho del contenedor principal y ya
no toman la altura porque a lo largo de la cruz eje, los estamos alineando con elementos
de alineación y allí, configuré esto al centro.
El valor predeterminado aquí es estirar y si lo configuro nuevamente para estirar, entonces, como era de esperar, lo hacen
para toda la altura.
Ahora, si desea asegurarse de que tengan el ancho disponible, no puede establecer el estiramiento aquí para
justificar el contenido, que es su vehículo de posicionamiento del eje principal, por lo que no puede configurar el estiramiento aquí.
Entonces, ¿qué puedes hacer con respecto a eso entonces?
Bueno, eso es algo que ahora configura en cada elemento secundario en sí.
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
esto en el elemento principal, normalmente lo configura
en el elemento secundario.
Entonces, por ejemplo, si configuro esto en el centro ahora para que el padre no le
diga al niño cuánto espacio debe ocupar, entonces podemos controlar completamente el espacio que ocupa un niño yendo al
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,
por lo que están dentro de una vista
en este caso aquí y eso puede ser una vista en sí misma, pero también podría ser otro componente como
un texto, por ejemplo.
Así que ahora aquí, puede agregar flex y puede establecerlo en un valor de uno,
por ejemplo, flex debe ser un número. Si configura esto en uno, lo que
verá es que ahora el contenedor rojo donde configuré flex a 1 toma todo el ancho disponible que puede obtener tanto que
deja suficiente espacio para el contenedor azul y el verde para que puedan puede exprimir su contenido
en el flexbox circundante.
Ahora no podemos ver los límites del contenedor circundante, pero los límites serían esencialmente donde comienza el elemento
rojo y el elemento verde y así en el eje horizontal aquí.
Así que ahora flex one se asegura de que el elemento rojo sea lo más grande posible, por
lo que ocupa tanto espacio como sea posible. De forma predeterminada, las vistas solo ocupan tanto espacio como requieren
sus
elementos secundarios, por lo que este carácter lo requiere, pero con Flex One, cambia esto y ahora ocupan tanto espacio a lo largo
del eje principal, así
como a lo ancho aquí, como pueden obtener. Para el eje cruzado, nuevamente es
un caso especial, debe hacer esto en el padre. Para el eje principal y dado que tenemos
una fila aquí, el eje principal es un eje horizontal de izquierda a derecha, puede
hacerlo con la propiedad flex en un elemento secundario.
Ahora, por supuesto, también puede agregar flex a otros elementos secundarios, como ese segundo al contenedor azul
con los dos allí,
también puede agregar flex uno allí.
Así que ahora tengo uno flexible en el contenedor rojo y uno flexible
en el contenedor azul y lo que sucede ahora es que ambos ocupan el espacio libre disponible y entre estas dos cajas,
el espacio se distribuye de manera uniforme y eso es lo que indica este número aquí.
Este número es un número
relativo, todos los elementos en el mismo flexbox, con la propiedad flex distribuyen el espacio disponible al considerar
el número que asigna aquí y estos números son relativos entre sí.
Entonces, si le doy al contenedor azul flex dos aquí, entonces esto significa que del espacio disponible que
tiene en ese contenedor circundante, después de deducir el espacio que cada elemento necesita para exprimir su
contenido
allí, el contenedor azul ocupará el doble de espacio que este porque aquí tenemos flex
uno, aquí tenemos
flex dos, si tuviéramos flex tres aquí, entonces esto tomaría tres quintos del espacio libre disponible porque tenemos tres
más dos, por lo
que tenemos 5 segmentos disponibles, por así decirlo y aquí el contenedor rojo tomaría 3 segmentos, el
contenedor azul tomaría 2 segmentos.
Si tenemos 1 y 2, entonces tenemos tres segmentos disponibles y el contenedor azul toma dos de
ellos, el rojo toma uno, por lo que siempre sumas estos números flexibles y luego los distribuyes o eso se hace automáticamente,
por supuesto, pero luego se distribuye el espacio disponible en consecuencia.
Así que ahora aquí, veremos que el contenedor azul es dos veces más grande que el rojo o ocupa
el doble de espacio libre que el rojo.
Así es como puede trabajar
con flex, puede organizar cómo se posicionan los elementos con la dirección flex, con contenido justificado y con elementos alineados,
y también puede hacer que sus elementos crezcan y se reduzcan con la ayuda de flex.
Así que ahora es una breve introducción a flexbox en React Native, como dije
inspirado en Flexbox para CSS, así que si sabías eso, todo lo que expliqué aquí probablemente no sea
nuevo para ti.
Trabajaremos con flexbox a lo largo de
este curso, por lo que las cosas también se aclararán y trabajaremos mucho con
él y verás cómo puedes crear hermosas interfaces de usuario con flexbox, flexbox al final es la herramienta en React Nativo
para estructurar su contenido en una página, para organizar su contenido y, por lo general, trabajará con muchas
vistas que también se anidan entre sí para que pueda colocar los elementos de la
manera que desee, por
supuesto, y eso también es importante. No solo tiene que tener una vista en su aplicación
que use flexbox, podría tener otra vista allí que también use flexbox y, como
mencioné, cada vista por defecto usa flexbox y luego puede anidar estas vistas entre sí para que coloca
todo de la manera que desee y también verá esto en
este módulo y, de hecho, ya lo estoy haciendo aquí. En mis vistas aquí, que están en la vista circundante,
así que mis cuadros aquí, allí también uso justificar contenido y alinear elementos para centrar mis números en estos cuadros, de
modo que 1, 2 y 3 estén centrados allí horizontal y verticalmente y eso funciona porque tenemos flexbox activado de forma
predeterminada y no podemos desactivarlo por cierto, por lo tanto, solo uso estas dos propiedades aquí para alinear mi contenido de esta
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
principal es de arriba a abajo porque la dirección de flexión predeterminada es la columna y el eje transversal
es de izquierda a derecha.
Eso es solo una nota al margen.