Cómo usar Flexbox en React Native

Flexbox es una herramienta CSS que le permite crear diseños unidimensionales flexibles. Le permite controlar la posición de los elementos dentro de un contenedor para que tenga más control sobre la presentación de su contenido en la pantalla.

Este tutorial demuestra cómo usar flexbox en React Native para crear diseños flexibles y receptivos. Aprenderá a colocar elementos secundarios de un elemento contenedor mediante las propiedades de flexbox.

Comparación del comportamiento de Flexbox en React Native y Web Development

Si desea organizar el contenido del elemento contenedor usando flexbox en CSS simple, debe usar el pantalla: flexionar propiedad.

envase { mostrar: doblar; }

Pero con React Native, no necesita configurar el pantalla: flexionar propiedad. Esto se debe a que React Native usa flexbox de forma predeterminada para crear diseños.

Aquí hay algunas diferencias a tener en cuenta sobre cómo se comporta flexbox cuando se usa para alinear elementos HTML

en aplicaciones web versus cómo se comporta en React Native:

• FlexDirection por defecto a fila en las aplicaciones web, pero el valor predeterminado es columna en React Native.
• alinearContenido por defecto a estirar en aplicaciones web y arranque flexible en React Native.
• flexionar el valor predeterminado es 1 en web y 0 en React Native.

Uso de las propiedades de Flexbox en React Native

Las propiedades de Flexbox le permiten describir cómo alinear los elementos secundarios del elemento contenedor. Debe comprender estas propiedades para crear diseños complejos que se ajusten a las necesidades de su aplicación.

1. Usando la propiedad flex en React Native

El doblar propiedad determina cómo Vista componente llena la pantalla. Esta propiedad acepta un valor entero mayor o igual a 0. El valor especifica la fracción de la pantalla que Vista componente debe ocupar.

En este ejemplo, está creando una pantalla con una sola vista desde el Biblioteca de componentes React Native:

importar Reaccionar de"reaccionar"
importar { Hoja de estilo, Ver } de"reaccionar-nativo"
exportarpor defectofunciónaplicación() {
devolver (
 <>
fondoColor: "#A020F0", doblar: 1}} /> 
 </>
 )
}

Aquí está la salida:

Aquí asignó el 1 como el valor flexible de la Vista componente. El Vista El componente ocupa toda la pantalla (100 %) porque ha dividido el espacio en un grupo.

Veamos otro ejemplo:

importar Reaccionar de"reaccionar"
importar { Hoja de estilo, Ver } de"reaccionar-nativo"
exportarpor defectofunciónaplicación() {
devolver (

fondoColor: "#A020F0", doblar: 1}} />
color de fondo: "#7cb48f", doblar: 3 }} /> 
 </View>
 )
}

Aquí está el resultado:

Aquí tienes dos Vista elementos dentro de otro Vista elemento. El primer hijo está configurado para flexión: 1, y el segundo se establece en flexión: 3. Esos valores dividen el espacio entre los dos niños. El primero ocupa 1/4 de la pantalla mientras que el segundo ocupa 3/4 de la pantalla (La pantalla se divide en 4 bloques porque 1+3 = 4).

2. Usando la propiedad flexDirection en React Native

Si observa la captura de pantalla anterior, verá que los elementos secundarios están uno encima del otro. Este es el comportamiento predeterminado de flexbox en React Native (FlexDirection por defecto a la columna valor).

También puede configurar el FlexDirection propiedad a fila, columna inversa, y fila-reversa. En el siguiente ejemplo, FlexDirection se establece en fila, por lo tanto, los elementos secundarios se colocan uno al lado del otro:

importar Reaccionar de"reaccionar"
importar { Hoja de estilo, Ver } de"reaccionar-nativo"
constante estilos = StyleSheet.create({
 envase: {
 color de fondo: "#00FF00",
 doblar: 1,
 alinear elementos: "centro",
 dirección flexible: "fila",
 },
 cuadrado: {
 color de fondo: "#FF0000",
 ancho: 98,
 altura: 98,
 margen: 4,
 },
});
exportarpor defectofunciónaplicación() {
devolver (




 </View>
 )
}

Aquí está el resultado:

Configuración de la FlexDirection a fila-reversa coloca a los niños uno al lado del otro, pero invierte el orden. Del mismo modo, el columna inversa coloca a los niños uno encima del otro pero en secuencia opuesta a la definida por el columna.

3. Uso deJustifyContent en React Native

El justificar el contenido La propiedad alinea los elementos secundarios de un contenedor flexbox a lo largo del eje principal. Si el FlexDirection se establece en columna, entonces el eje primario es el eje vertical. Si está configurado para fila, entonces es horizontal.

Los posibles valores de justificar el contenidoson arranque flexible, extremo flexible, centro, espacio entre, espacio alrededor, y uniformemente en el espacio.

En el siguiente ejemplo, FlexDirection se establece en fila y justificar el contenidose establece en arranque flexible:

importar Reaccionar de"reaccionar"
importar { Hoja de estilo, Ver } de"reaccionar-nativo"
constante estilos = StyleSheet.create({
 envase: {
 color de fondo: "#00FF00",
 doblar: 1,
 justificar el contenido: "inicio flexible",
 dirección flexible: "fila",
 },
 cuadrado: {
 color de fondo: "#FF0000",
 ancho: 98,
 altura: 98,
 margen: 6,
 },
});
exportarpor defectofunciónaplicación() {
devolver (




 </View>
 )
}

Aquí está la salida:

Si cambias el FlexDirection a columna, arranque flexible se aplicará al eje vertical. Entonces las cajas se apilarán una encima de la otra.

Configuración justificar el contenido al centro (mientras que el eje primario es un columna) centra las tres cajas de niños.

4. Usando alignItems en React Native

El alinear elementos La propiedad determina la ubicación de los elementos en un contenedor flexbox a lo largo del eje secundario. Esto es lo contrario de justificar el contenido. Al igual que justificar el contenido cuida la alineación vertical, alinear elementos maneja la alineación horizontal. Los posibles valores de alinear elementos son arranque flexible, extremo flexible, centro, y base.

En el siguiente ejemplo, FlexDirection se establece en fila y alinear elementosse establece en arranque flexible:

importar Reaccionar de"reaccionar"
importar { Hoja de estilo, Ver } de"reaccionar-nativo"
constante estilos = StyleSheet.create({
 envase: {
 color de fondo: "#00FF00",
 doblar: 1,
 alinear elementos: "inicio flexible",
 dirección flexible: "fila",
 },
 cuadrado: {
 color de fondo: "#FF0000",
 ancho: 98,
 altura: 98,
 margen: 6,
 },
});
exportarpor defectofunciónaplicación() {
devolver (





 </View>
 )
}

Aquí está la salida:

Si configura el FlexDirection propiedad a columna y alinear elementos a centro, las cajas se colocarán una encima de la otra y los elementos secundarios se alinearán en el centro.

5. Usando alignSelf en React Native

El alinearse La propiedad determina cómo debe alinearse un elemento secundario individual en el contenedor. anula alinear elementos, y los posibles valores son arranque flexible, extremo flexible, centro, y base.

En el siguiente ejemplo, establecemos un valor predeterminado alinear elementos propiedad y anularla usando alinearse:

importar Reaccionar de"reaccionar"
importar { Hoja de estilo, Ver } de"reaccionar-nativo"
constante estilos = StyleSheet.create({
 envase: {
 color de fondo: "#00FF00",
 doblar: 1,
 alinear elementos: "centro", 
 justificar el contenido: "centro", 
 dirección flexible: "fila",
 },
 cuadrado: {
 color de fondo: "#FF0000",
 ancho: 98,
 altura: 98,
 margen: 6,
 },
});
exportarpor defectofunciónaplicación() {
devolver (


alinearse: "extremo flexible" }]} />
alinearse: "inicio flexible" }]} /> 
 )
}

Aquí está el resultado:

Otras propiedades de Flexbox

Hay otras dos propiedades que puede usar al crear un diseño de caja flexible en React Native:

• envoltura flexible: En caso de que los niños de un contenedor se desborden. Usar envoltura flexible para especificar si deben reducirse en una sola línea o envolverse en varias líneas. Posibles valores para envoltura flexible son ahora rap y envoltura.
• brecha: Usas el brecha propiedad para agregar espacios entre los elementos de la cuadrícula en el contenedor. Su valor debe ser el tamaño del espacio que desea entre los elementos. Puede especificar el brecha propiedad usando unidades CSS como px, em o rem.

Más información sobre React Native

Ahora que comprende flexbox y sabe cómo usarlo en su aplicación React Native para crear diseños flexibles y receptivos, es hora de que entre en el meollo de la cuestión de React Native.