Propiedad React Native Flexbox applyContent

En este artículo, vamos a ver la propiedad allowContent de flexbox en React Native. Flexbox tiene tres propiedades principales. Uno de ellos es justificar el contenido. La propiedad justificar contenido se usa para determinar cómo deben alinearse los componentes secundarios dentro del eje principal de su contenedor. Puede alinear a los niños horizontal o verticalmente dentro de un contenedor. Si flexDirection se establece en fila, la alineación será horizontal; de lo contrario, se alineará verticalmente dentro de un contenedor.

Sintaxis:

justify-content: flex-start|flex-end|center|space-between|
space-around|space-evenly;

Valores de propiedad:

flex-start: Es el valor por defecto deJustifyContent. Se utiliza para alinear elementos flexibles o componentes secundarios desde el principio del contenedor.
flex-end: Actúa de manera opuesta a flex-start. Se utiliza para alinear el componente secundario al final del contenedor.
center: Alinea el componente hijo en el centro del contenedor.
espacio entre: los componentes de los niños se colocan con el mismo espacio donde el elemento se empuja para comenzar y el último elemento se empuja para terminar.
espacio alrededor: El espacio entre el componente de niños y el espacio de las esquinas es el mismo.
uniformemente en el espacio: los componentes secundarios se colocan con el mismo espacio entre ellos, pero el espacio desde las esquinas es diferente.

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 myapp
```
Paso 3: Ahora ve a la carpeta de tu proyecto, es decir, myapp
```
cd myapp
```

Estructura del proyecto: Tendrá el siguiente aspecto.

Ejemplo: aquí, en este ejemplo, la dirección de flexión se establece en fila y el contenido de justificación es de inicio flexible.

App.js

import React, { Component } from 'react'
import { View, StyleSheet } from 'react-native'
  
const App = (props) => {
   return (
      <View style = {styles.container}>
         <View style = 
               {[styles.item,{backgroundColor:'green'}]} />
         <View style = 
               {[styles.item,{backgroundColor:'blue'}]} />
         <View style = 
               {[styles.item,{backgroundColor:'red'}]} />
      </View>
   )
}
export default App;
  
const styles = StyleSheet.create ({
   container: {
      flexDirection: 'row',
      justifyContent: 'flex-start',
      marginTop:10,
      height: 600
   },
   item:{
     width:120,
     height:120
   }
})

Inicie el servidor utilizando el siguiente comando.

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.

Ahora mantendremos todo el código igual y solo haremos los cambios en el valor de la propiedadauthorContent para ver el cambio como se muestra a continuación:

Ilustración de propiedad flex-end , use la siguiente sintaxis:
```
justifyContent: 'flex-end',
```
Ilustración del centro de propiedades , use la siguiente sintaxis:
```
justifyContent: 'center',
```
Espacio de propiedad entre la ilustración, use la siguiente sintaxis:
```
justifyContent: 'space-between',
```
Ilustración del espacio alrededor de la propiedad , use la siguiente sintaxis:
```
justifyContent: 'space-around',
```
Ilustración de espacio uniforme de propiedad , use la siguiente sintaxis:
```
justifyContent: 'space-evenly',
```