22. Justify Content Row

 

Tema: 22. Justify Content en Flexbox para Row (Fila) en React Native

Objetivo:

Comprender y aplicar la propiedad justifyContent en contenedores con flexDirection: 'row' para controlar la distribución horizontal de elementos en React Native.

Contenido del tutorial:

1. Introducción a justifyContent

  • ¿Qué es justifyContent?: Propiedad de flexbox que distribuye elementos a lo largo del eje principal.

  • Cuando usamos flexDirection: 'row':

    • Eje principal → Horizontal (de izquierda a derecha)

    • Eje cruzado → Vertical (de arriba a abajo)

  • Valores disponibles:

    • flex-start (por defecto)

    • flex-end

    • center

    • space-between

    • space-around

    • space-evenly

2. Configuración inicial del ejemplo

Código base:

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,

    flexDirection: 'row',

    alignItems: 'center',

    justifyContent: 'center', // ← Esta es la propiedad que cambiaremos

  },

  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 con ejemplos visuales

1. flex-start (Valor por defecto)

jsx

justifyContent: 'flex-start'

  • Comportamiento: Alinea elementos al inicio del eje principal (izquierda)

  • Visualización:

  • text

  • [1][2][3]···········

  • Uso: Cuando quieres elementos pegados al inicio

2. flex-end

jsx

justifyContent: 'flex-end'

  • Comportamiento: Alinea elementos al final del eje principal (derecha)

  • Visualización:

  • text

  • ···········[1][2][3]

  • Uso: Para alinear elementos a la derecha

3. center

jsx

justifyContent: 'center'

  • Comportamiento: Centra elementos en el eje principal

  • Visualización:

  • text

  • ·····[1][2][3]·····

  • Uso: Para centrado horizontal

4. space-between (Muy utilizado)

jsx

justifyContent: 'space-between'

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

  • Visualización:

  • text

  • [1]·····[2]·····[3]

  • Característica: El primer elemento al inicio, el último al final

  • Con margen horizontal:

  • jsx

container: {

  flex: 1,

  flexDirection: 'row',

  alignItems: 'center',

  justifyContent: 'space-between',

  marginHorizontal: 20, // ← Agrega espacio en los extremos

  • }

  • text

  • ··[1]····[2]····[3]··

5. space-around

jsx

justifyContent: 'space-around'

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

  • Visualización:

  • text

  • ··[1]··[2]··[3]··

  • Cálculo: El espacio entre elementos es igual a 2× el espacio de los extremos

  • Uso: Cuando quieres espacio uniforme incluyendo extremos

6. space-evenly

jsx

justifyContent: 'space-evenly'

  • Comportamiento: Distribuye elementos con espacio totalmente uniforme entre todos

  • Visualización:

  • text

  • ·[1]·[2]·[3]·

  • Cálculo: Todos los espacios son iguales (entre elementos y extremos)

  • Uso: Para máxima uniformidad

4. Tabla comparativa de valores

Valor

Espacio extremos

Espacio entre

Ejemplo visual

flex-start

No

No

[1][2][3]······

flex-end

No

No

······[1][2][3]

center

Igual ambos lados

No

···[1][2][3]···

space-between

No

Uniforme

[1]····[2]····[3]

space-around

Mitad del espacio entre

Uniforme

··[1]··[2]··[3]··

space-evenly

Igual al espacio entre

Uniforme

·[1]·[2]·[3]·

5. Ejemplos prácticos con código

Ejemplo 1: Menú horizontal centrado

jsx

container: {

  flexDirection: 'row',

  justifyContent: 'center',

  backgroundColor: '#f0f0f0',

  paddingVertical: 10,

}

Ejemplo 2: Botones distribuidos en ancho completo

jsx

container: {

  flexDirection: 'row',

  justifyContent: 'space-between',

  paddingHorizontal: 20,

}

Ejemplo 3: Tarjetas con espacio uniforme

jsx

container: {

  flexDirection: 'row',

  justifyContent: 'space-around',

  flexWrap: 'wrap', // Para múltiples filas

}

6. Combinación con otras propiedades

  • Con alignItems: 'center': Centra verticalmente mientras justifyContent maneja lo horizontal

  • Con marginHorizontal: Agrega espacio en los extremos con space-between

  • Con flexWrap: 'wrap': Permite múltiples filas cuando el espacio es limitado

7. Ejercicios para practicar

  1. Crea una barra de navegación con 3 íconos usando space-between

  2. Haz una galería de imágenes con space-around y márgenes

  3. Centra un formulario con center y agrega espacio vertical

  4. Distribuye 5 elementos con space-evenly y cambia a 2 elementos para ver la diferencia

  5. Combina justifyContent con alignItems: 'flex-start' para alinear arriba

8. Errores comunes y soluciones

Problema

Solución

Elementos no se mueven

Verificar que flexDirection sea 'row'

Espacios desiguales

Usar space-evenly en lugar de space-around

Elementos fuera de pantalla

Reducir márgenes o usar flexWrap

No funciona con 1 elemento

Con 1 elemento, todos los valores se comportan igual

9. Código completo interactivo

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');


  return (

    <View style={styles.main}>

      <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>


      <Text style={styles.currentValue}>

        justifyContent: '{currentJustify}'

      </Text>


      <View style={[styles.container, { 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,

  },

  options: {

    paddingHorizontal: 10,

    marginBottom: 20,

  },

  optionButton: {

    padding: 10,

    marginRight: 10,

    backgroundColor: '#e0e0e0',

    borderRadius: 5,

  },

  selectedOption: {

    backgroundColor: '#6200ee',

  },

  optionText: {

    color: '#333',

    fontWeight: 'bold',

  },

  currentValue: {

    textAlign: 'center',

    fontSize: 18,

    fontWeight: 'bold',

    marginBottom: 20,

  },

  container: {

    flex: 1,

    flexDirection: 'row',

    alignItems: 'center',

    backgroundColor: '#f5f5f5',

    paddingHorizontal: 20,

  },

  boxSize: {

    width: 80,

    height: 80,

    justifyContent: 'center',

    alignItems: 'center',

    backgroundColor: '#4CAF50',

    borderRadius: 8,

  },

  text: {

    fontSize: 24,

    fontWeight: 'bold',

    color: 'white',

  },

});


export default App;

Conclusión:

justifyContent es una herramienta poderosa para controlar la distribución horizontal de elementos en React Native. Dominar sus valores te permitirá:

✅ Crear interfaces consistentes
✅ Distribuir espacio eficientemente
✅ Centrar contenido fácilmente
✅ Crear layouts responsivos
✅ Mantener código limpio y mantenible

Próximo paso: Aprenderemos sobre alignItems para controlar la alineación vertical en contenedores flex.

💡 Consejo: Experimenta cambiando los valores de justifyContent en tiempo real para entender visualmente cómo afecta la disposición de tus elementos

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

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 > ...
Leer más