Tema: 23. Justify Content en Flexbox para Column (Columna) en React Nativ

Objetivo:

Comprender y aplicar la propiedad justifyContent en contenedores con flexDirection: 'column' (valor por defecto) para controlar la distribución vertical de elementos en React Native.

Contenido del tutorial:

1. Introducción a justifyContent en columnas

  • Por defecto en React Native: flexDirection: 'column'

  • Cuando usamos flexDirection: 'column':

    • Eje principal → Vertical (de arriba a abajo)

    • Eje cruzado → Horizontal (de izquierda a derecha)

  • justifyContent controla: Distribución de elementos a lo largo del eje vertical

2. Configuración inicial del ejemplo

Código base para columnas:

jsx

import React from 'react';

import { View, Text, StyleSheet } from 'react-native';


const App = () => {

  return (

    <View style={styles.container}>

      <View style={styles.boxSize}>

        <Text style={styles.text}>1</Text>

      </View>

      <View style={styles.boxSize}>

        <Text style={styles.text}>2</Text>

      </View>

      <View style={styles.boxSize}>

        <Text style={styles.text}>3</Text>

      </View>

    </View>

  );

};


const styles = StyleSheet.create({

  container: {

    flex: 1, // ← Ocupa toda la pantalla

    // flexDirection: 'column', ← Implícito (valor por defecto)

    alignItems: 'center', // ← Alineación horizontal (eje cruzado)

    justifyContent: 'center', // ← Distribución vertical (eje principal)

  },

  boxSize: {

    width: 100,

    height: 100,

    margin: 5,

    justifyContent: 'center',

    alignItems: 'center',

    backgroundColor: 'gray',

  },

  text: {

    fontSize: 30,

    fontWeight: 'bold',

    color: 'white',

  },

});


export default App;

3. Valores de justifyContent en columnas con ejemplos

1. flex-start (Valor por defecto)

jsx

justifyContent: 'flex-start'

  • Comportamiento: Elementos alineados al inicio (parte superior)

  • Visualización:

  • text

[1]

[2]

[3]

  • ··· (espacio vacío abajo)

  • Uso: Para elementos que comienzan desde arriba

2. flex-end

jsx

justifyContent: 'flex-end'

  • Comportamiento: Elementos alineados al final (parte inferior)

  • Visualización:

  • text

··· (espacio vacío arriba)

[1]

[2]

  • [3]

  • Uso: Para elementos que deben estar al fondo

3. center

jsx

justifyContent: 'center'

  • Comportamiento: Centra elementos verticalmente

  • Visualización:

  • text

···

[1]

[2]

[3]

  • ···

  • Uso: Para centrado vertical completo

4. space-between

jsx

justifyContent: 'space-between'

  • Comportamiento: Distribuye elementos con espacio uniforme entre ellos, sin espacio en los extremos

  • Visualización:

  • text

[1]

(espacio)

[2]

(espacio)

  • [3]

  • Con margen vertical:

  • jsx

container: {

  flex: 1,

  justifyContent: 'space-between',

  marginVertical: 20, // ← Agrega espacio arriba y abajo

  • }

  • text

(espacio)

[1]

(espacio)

[2]

(espacio)

[3]

  • (espacio)

5. space-around

jsx

justifyContent: 'space-around'

  • Comportamiento: Distribuye elementos con espacio uniforme alrededor de cada elemento

  • Visualización:

  • text

(medio espacio)

[1]

(espacio completo)

[2]

(espacio completo)

[3]

  • (medio espacio)

  • Característica: El espacio en los extremos es la mitad del espacio entre elementos

6. space-evenly

jsx

justifyContent: 'space-evenly'

  • Comportamiento: Distribuye elementos con espacio totalmente uniforme entre todos

  • Visualización:

  • text

(espacio)

[1]

(espacio)

[2]

(espacio)

[3]

  • (espacio)

  • Todos los espacios son iguales (entre elementos y extremos)

4. Comparación: Row vs Column

Propiedad

flexDirection: 'row'

flexDirection: 'column'

Eje principal

Horizontal (→)

Vertical (↓)

Eje cruzado

Vertical (↓)

Horizontal (→)

flex-start

Izquierda

Arriba

flex-end

Derecha

Abajo

space-between

Espacio horizontal entre

Espacio vertical entre

Margen relevante

marginHorizontal

marginVertical

5. flexDirection: 'column-reverse'

Invertir el orden de los elementos:

jsx

container: {

  flex: 1,

  flexDirection: 'column-reverse', // ← ¡Invertido!

  alignItems: 'center',

  justifyContent: 'flex-start', // Ahora flex-start es abajo

}

  • Resultado: El elemento 3 aparece arriba, el 1 abajo

  • Visualización:

  • text

[3]

[2]

  • [1]

  • Combinaciones útiles:

    • column-reverse + flex-end → Elementos alineados arriba

    • column-reverse + space-between → Distribución invertida

6. Ejemplos prácticos

Ejemplo 1: Formulario centrado verticalmente

jsx

container: {

  flex: 1,

  justifyContent: 'center',

  paddingHorizontal: 20,

}

Ejemplo 2: Lista con espacio uniforme

jsx

container: {

  flex: 1,

  justifyContent: 'space-around',

  paddingVertical: 30,

}

Ejemplo 3: Header, contenido y footer

jsx

container: {

  flex: 1,

  justifyContent: 'space-between',

}

// Dentro:

// <Header />

// <MainContent />

// <Footer />

Ejemplo 4: Chat con mensajes desde abajo

jsx

container: {

  flex: 1,

  flexDirection: 'column-reverse', // Mensajes nuevos arriba

  justifyContent: 'flex-start',

}

7. Código interactivo para probar todas las opciones

jsx

import React, { useState } from 'react';

import { View, Text, StyleSheet, TouchableOpacity, ScrollView } from 'react-native';


const justifyContentOptions = [

  'flex-start',

  'flex-end',

  'center',

  'space-between',

  'space-around',

  'space-evenly',

];


const App = () => {

  const [currentJustify, setCurrentJustify] = useState('center');

  const [direction, setDirection] = useState('column');


  return (

    <View style={styles.main}>

      <View style={styles.controls}>

        <Text style={styles.title}>Flex Direction:</Text>

        <View style={styles.directionButtons}>

          {['column', 'column-reverse'].map((dir) => (

            <TouchableOpacity

              key={dir}

              style={[styles.dirButton, direction === dir && styles.selectedDir]}

              onPress={() => setDirection(dir)}

            >

              <Text style={styles.dirText}>{dir}</Text>

            </TouchableOpacity>

          ))}

        </View>

        

        <Text style={styles.title}>justifyContent:</Text>

        <ScrollView horizontal style={styles.options}>

          {justifyContentOptions.map((option) => (

            <TouchableOpacity

              key={option}

              style={[

                styles.optionButton,

                currentJustify === option && styles.selectedOption,

              ]}

              onPress={() => setCurrentJustify(option)}

            >

              <Text style={styles.optionText}>{option}</Text>

            </TouchableOpacity>

          ))}

        </ScrollView>

      </View>


      <Text style={styles.currentValue}>

        {`flexDirection: '${direction}'`}

        {'\n'}

        {`justifyContent: '${currentJustify}'`}

      </Text>


      <View style={[styles.container, { 

        flexDirection: direction,

        justifyContent: currentJustify 

      }]}>

        {[1, 2, 3].map((num) => (

          <View key={num} style={styles.boxSize}>

            <Text style={styles.text}>{num}</Text>

          </View>

        ))}

      </View>

    </View>

  );

};


const styles = StyleSheet.create({

  main: {

    flex: 1,

    paddingTop: 50,

    backgroundColor: '#fff',

  },

  controls: {

    padding: 20,

    backgroundColor: '#f5f5f5',

  },

  title: {

    fontSize: 16,

    fontWeight: 'bold',

    marginTop: 10,

    marginBottom: 5,

  },

  directionButtons: {

    flexDirection: 'row',

    marginBottom: 15,

  },

  dirButton: {

    padding: 10,

    marginRight: 10,

    backgroundColor: '#e0e0e0',

    borderRadius: 5,

    minWidth: 120,

    alignItems: 'center',

  },

  selectedDir: {

    backgroundColor: '#2196F3',

  },

  dirText: {

    color: '#333',

    fontWeight: 'bold',

  },

  options: {

    marginBottom: 10,

  },

  optionButton: {

    padding: 10,

    marginRight: 10,

    backgroundColor: '#e0e0e0',

    borderRadius: 5,

  },

  selectedOption: {

    backgroundColor: '#4CAF50',

  },

  optionText: {

    color: '#333',

    fontWeight: 'bold',

  },

  currentValue: {

    textAlign: 'center',

    fontSize: 16,

    fontWeight: 'bold',

    marginVertical: 20,

    color: '#333',

  },

  container: {

    flex: 1,

    alignItems: 'center',

    backgroundColor: '#f0f0f0',

    marginHorizontal: 20,

    marginBottom: 20,

    paddingVertical: 20,

    borderWidth: 1,

    borderColor: '#ddd',

    borderRadius: 10,

  },

  boxSize: {

    width: 100,

    height: 100,

    justifyContent: 'center',

    alignItems: 'center',

    backgroundColor: '#FF5722',

    borderRadius: 8,

    marginVertical: 5,

  },

  text: {

    fontSize: 24,

    fontWeight: 'bold',

    color: 'white',

  },

});


export default App;

8. Consejos para uso efectivo

  1. Pantallas de login/registro: Usa justifyContent: 'center' para centrar verticalmente

  2. Listas con muchos elementos: flex-start es el más natural

  3. Dashboards con widgets: space-around o space-evenly para distribución uniforme

  4. Evitar espacios no deseados: Usa marginVertical para controlar extremos con space-between

  5. Orden invertido: column-reverse es útil para chats, feeds, o listas cronológicas inversas

9. Ejercicios de práctica

  1. Crea un formulario con 3 campos usando space-between y márgenes

  2. Haz una pantalla de perfil con avatar arriba (flex-start) y datos abajo

  3. Simula un chat usando column-reverse con flex-start

  4. Distribuye 5 botones verticalmente con space-evenly

  5. Combina justifyContent: 'space-between' con alignItems: 'stretch' para elementos de ancho completo

Conclusión:

Dominar justifyContent en columnas es esencial para crear interfaces verticalmente bien estructuradas en React Native. Recuerda:

✅ Por defecto: flexDirection: 'column'
✅ justifyContent controla distribución vertical
✅ Usa marginVertical para controlar espacios en extremos
✅ column-reverse invierte el orden de elementos
✅ Cada valor tiene un caso de uso específico

Próximo paso: Profundizaremos en alignItems para controlar perfectamente la alineación horizontal dentro de contenedores flex.

💡 Tip: Usa colores de fondo temporalmente en tus contenedores para visualizar claramente cómo se distribuye el espacio con cada valor de justifyContent.

Comentarios

Publicar un comentario

Entradas más populares de este blog

18. Visualizar nuestros componentes limpios con StyleSheet

  Tema: 18. Visualizar nuestros componentes limpios con StyleSheet Objetivo: Aprender a organizar y limpiar los estilos de componentes en React Native utilizando StyleSheet.create() , separando la lógica de presentación del JSX para mejorar la legibilidad y mantenibilidad del código. Contenido del tutorial: 1. ¿Qué es StyleSheet? Definición: Una API de React Native que permite definir estilos de manera estructurada y optimizada. Ventajas: Mejora el rendimiento (caché de estilos). Separa estilos de la lógica del componente. Facilita el mantenimiento y reutilización. Valida los nombres de propiedades en tiempo de desarrollo. 2. Importar StyleSheet Se importa desde react-native : jsx import { StyleSheet } from 'react-native' ; 3. Estructura básica de StyleSheet.create() Sintaxis: jsx const styles = StyleSheet . create ({    nombreDelEstilo : {      propiedad1 : valor1 ,      propiedad2 : valor2 ,    },    o...
Leer más

15. Componente Image

  Tutorial: Componente Image en React Native 📱 Parte 15: Componente Image - Mostrando Imágenes en tu App 🎯 Objetivo: Aprender a usar el componente Image para mostrar imágenes en React Native desde diferentes fuentes: archivos locales, URLs remotas y base64. 📸 Analizando el Ejemplo de la Imagen Observando el código de la imagen: javascript < Text style = {{ margin : 5 , fontSize : 20 , fontWeight : 'bold' , color : 'gray' }} >   Componente Imagen </ Text > { /* Imagen local */ } < Image   style = {{ width : 150 , height : 150 }}   source = { require ( './imgs/react-native.jpg' )} /> { /* Imagen remota */ } < Image   style = {{ width : 150 , height : 150 }}   source = {{ uri : 'https://reactnative.dev/img/tiny_logo.png' }} /> Resultado visual esperado: text ┌─────────────────────────────────┐ │ Componente Imagen               │ │         ...
Leer más