¿Cómo usar Flexbox en React Native?

Flexbox se utiliza para proporcionar consistencia a un diseño. Se utiliza para hacer que el diseño se adapte al tamaño de la pantalla del dispositivo en el que se ejecuta. Al usar el diseño de caja flexible, puede especificar que un determinado elemento del diseño se extienda a esta fracción del espacio disponible.

En React Native, Flexbox es lo mismo que para CSS básico. La única diferencia está en los valores predeterminados.

• flexDirection: el valor predeterminado para CSS es fila, mientras que el valor predeterminado en React Native es columna .
• alignContent: el valor predeterminado para CSS es estirar, el valor predeterminado en React Native es flex-start .
• flexShrink: el valor predeterminado para CSS es 1, mientras que el valor predeterminado en React Native es 0.

Ahora comencemos con la implementación:

• Paso 1: Abra su terminal e instale expo-cli con el siguiente comando.

  npm install -g expo-cli

 

• Paso 2: ahora cree un proyecto con el siguiente comando.

  expo init AwesomeProject

• Paso 3: Ahora ve a la carpeta de tu proyecto, es decir, AwesomeProject

  cd AwesomeProject

Estructura del proyecto: Se verá así.

Estructura del proyecto

Propiedad Flex: la propiedad Flex definirá cómo los componentes en su diseño se extenderán sobre el espacio disponible a lo largo de su eje principal, que por defecto es una columna. El espacio se dividirá en la proporción de la propiedad de flexión de cada elemento.

Ejemplo: escriba el siguiente código en el archivo App.js.

import React from 'react';
import {View } from 'react-native';
  
export default function App() {
  return (
    <View style={{
      flex: 1
    }}>
        <View style={{ flex: 4, backgroundColor: "white" }} />
        <View style={{ flex: 1, backgroundColor: "black" }} />
        <View style={{ flex: 7, backgroundColor: "green" }} />
      </View>
  );
}

npm run android

Salida: si su emulador no se abrió automáticamente, debe hacerlo manualmente. Primero, vaya a su estudio de Android y ejecute el emulador. Ahora inicie el servidor de nuevo.  

Producción

Propiedad Flex Direction: la propiedad flexDirection controla la dirección en la que se disponen los elementos secundarios de un Node, es decir, el eje principal. Hay cuatro tipos de flexDirection que se detallan a continuación:

• columna (valor predeterminado): esto alinea a los niños de arriba a abajo de manera vertical.
• fila: Esto alinea a los niños de izquierda a derecha de manera horizontal.
• column-reverse: Esto alinea a los niños de abajo hacia arriba en el espacio vertical.
• fila-reversa: Esto alinea a los niños de derecha a izquierda en el espacio horizontal.

Ejemplo: escriba el siguiente código en el archivo App.js.

import React from 'react';
import {View } from 'react-native';
  
export default function App() {
  return (
    <View style={{
      flex: 1,
      flexDirection: "row",
    }}>
        <View style={{ flex: 4, backgroundColor: "white" }} />
        <View style={{ flex: 1, backgroundColor: "black" }} />
        <View style={{ flex: 7, backgroundColor: "green" }} />
      </View>
  );
}

npm run android

Salida: si su emulador no se abrió automáticamente, debe hacerlo manualmente. Primero, vaya a su estudio de Android y ejecute el emulador. Ahora inicie el servidor de nuevo.  

Producción

Referencia: https://reactnative.dev/docs/flexbox