21. Creación de Componente
Tema: 21. Creación de Componente con Layouts Flexbox
Objetivo:
Aprender a crear componentes utilizando contenedores View con estilos flexbox para organizar elementos en pantalla, aplicando propiedades como flexDirection, justifyContent y alignItems.
Contenido del tutorial:
1. Configuración inicial del componente
Crear el componente básico:
jsx
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
const App = () => {
return (
<View>
<Text>App</Text>
</View>
);
};
export default App;
2. Crear contenedores View con contenido
Agregar Views padres e hijos:
jsx
const App = () => {
return (
{/* Contenedor padre principal */}
<View>
{/* Tres contenedores hijos */}
<View>
<Text>1</Text>
</View>
<View>
<Text>2</Text>
</View>
<View>
<Text>3</Text>
</View>
</View>
);
};
Por defecto: React Native organiza elementos en columna (vertical)
3. Aplicar estilos con StyleSheet
Crear objeto de estilos:
jsx
const styles = StyleSheet.create({
container: {
flex: 1, // Ocupa todo el espacio disponible
flexDirection: 'row', // Cambia a disposición horizontal
alignItems: 'center', // Centra verticalmente
justifyContent: 'center', // Centra horizontalmente
},
});
Aplicar estilo al contenedor padre:
jsx
<View style={styles.container}>
{/* Contenido aquí */}
</View>
4. Estilizar las cajas individuales
Crear estilo para las cajas:
jsx
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
},
boxSize: {
width: 100,
height: 100,
margin: 5,
justifyContent: 'center', // Centra contenido dentro de la caja
alignItems: 'center', // Centra contenido dentro de la caja
},
});
Aplicar estilos y colores a cada caja:
jsx
<View style={[styles.boxSize, { backgroundColor: 'gray' }]}>
<Text>1</Text>
</View>
<View style={[styles.boxSize, { backgroundColor: 'blue' }]}>
<Text>2</Text>
</View>
<View style={[styles.boxSize, { backgroundColor: 'green' }]}>
<Text>3</Text>
</View>
5. Estilizar el texto dentro de las cajas
Crear estilo para el texto:
jsx
const styles = StyleSheet.create({
// ... otros estilos
text: {
fontSize: 30,
fontWeight: 'bold',
color: 'white',
},
});
Aplicar estilo al texto:
jsx
<Text style={styles.text}>1</Text>
6. Código completo del componente
jsx
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
const App = () => {
return (
<View style={styles.container}>
{/* Caja 1 */}
<View style={[styles.boxSize, { backgroundColor: '#4A5568' }]}>
<Text style={styles.text}>1</Text>
</View>
{/* Caja 2 */}
<View style={[styles.boxSize, { backgroundColor: '#2D3748' }]}>
<Text style={styles.text}>2</Text>
</View>
{/* Caja 3 */}
<View style={[styles.boxSize, { backgroundColor: '#1A202C' }]}>
<Text style={styles.text}>3</Text>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#F7FAFC', // Fondo de la pantalla
},
boxSize: {
width: 100,
height: 100,
margin: 10,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 10, // Bordes redondeados
elevation: 5, // Sombra en Android
shadowColor: '#000', // Sombra en iOS
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.1,
shadowRadius: 4,
},
text: {
fontSize: 30,
fontWeight: 'bold',
color: 'white',
},
});
export default App;
7. Explicación de propiedades Flexbox clave
8. Variaciones del layout
En columna:
jsx
container: {
flex: 1,
flexDirection: 'column', // Valor por defecto
alignItems: 'center',
justifyContent: 'center',
}
Con espacio distribuido:
jsx
container: {
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between', // Espacio entre elementos
padding: 20,
}
Con elementos alineados al inicio:
jsx
container: {
flex: 1,
flexDirection: 'row',
alignItems: 'flex-start', // Alinea al inicio vertical
paddingTop: 50,
}
9. Ejercicio práctico
Intenta modificar el código para:
Crear 4 cajas en lugar de 3
Cambiar los colores a una paleta diferente
Organizar las cajas en 2 filas de 2 columnas
Agregar un título encima de las cajas
Hacer las cajas responsivas (usar porcentajes)
10. Consejos para depuración
Problemas comunes:
Syntax error: Verificar comillas y corchetes
Undefined is not an object: Verificar nombres de estilos
Elementos no visibles: Verificar colores de fondo
Herramientas útiles:
React Native Debugger
Console.log() para valores
Estilos temporales con bordes para ver límites
Resultado final esperado:
Tres cajas cuadradas con números centrados
Disposición horizontal en el centro de la pantalla
Colores de fondo diferentes para cada caja
Texto blanco, grande y en negrita
Espacios uniformes entre cajas
Conclusión:
Has aprendido a crear componentes estructurados utilizando:
✅ Contenedores View como elementos base
✅ StyleSheet para organizar estilos
✅ Flexbox para disposición de elementos
✅ Combinación de estilos con arrays
✅ Componentes reutilizables con propiedades consistentes
Próximo paso: Aprenderemos a hacer componentes dinámicos recibiendo propiedades (props) y creando listas de elementos.
📌 Recuerda: La práctica constante es clave para dominar los layouts en React Native. Experimenta con diferentes valores de flexbox para entender completamente su comportamiento
Comentarios
Publicar un comentario