Propiedad React Native Flexbox flexDirection

En este artículo, vamos a ver la propiedad flexDirection de Flexbox en React Native. Flexbox tiene tres propiedades principales. Uno de ellos es flexDirection. La propiedad flexDirection se utiliza para determinar la alineación de sus elementos en las direcciones horizontal o vertical. Estableció el eje principal del trazado.

Sintaxis:

flexDirection: 'column|row|column-reverse|row-reverse'

Valores de propiedad:

columna: Es el valor por defecto de la propiedad flexDirection. Alinea los elementos secundarios de arriba a abajo.
fila : Alinea los elementos de los niños de izquierda a derecha.
column-reverse: Alinea los elementos secundarios de abajo hacia arriba. Es el reverso del valor de la columna.
fila-reversa: Alinea a los niños de derecha a izquierda.

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: Se verá así.

Ejemplo: Aquí, en este ejemplo, flexDirection se establece en la columna.

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: {
  flex:1,
     flexDirection: 'column',
  },
  item:{
    height:100,
    width:100
  }
})

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 propiedad flexDirection para ver el cambio.

Ilustración de la fila de propiedad, use la siguiente sintaxis:
```
flexDirection: 'row'
```
Ilustración inversa de columna de propiedad, use la siguiente sintaxis:
```
flexDirection: 'column-reverse'
```
Ilustración de fila inversa de propiedad, use la siguiente sintaxis:
```
flexDirection: 'row-reverse'
```