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,
},
otroEstilo: {
// más propiedades...
}
});
Ubicación: Normalmente se define después del componente o antes del export default.
4. Convertir estilos en línea a StyleSheet
Paso 1: Identificar estilos repetidos o complejos en el JSX.
Paso 2: Moverlos a un objeto styles usando StyleSheet.create().
Paso 3: Referenciarlos en los componentes con styles.nombreEstilo.
5. Ejemplo paso a paso
Antes (estilos en línea):
jsx
import React from 'react';
import { Text, View, TextInput } from 'react-native';
const App = () => {
return (
<View>
<Text style={{ fontSize: 30, fontWeight: 'bold' }}>Hola Mundo</Text>
<Text style={{ fontSize: 30, fontWeight: 'bold' }}>Hola Mundo 2</Text>
<Text style={{ margin: 5, fontSize: 20, fontWeight: 'bold', color: 'gray' }}>Componente TextInput</Text>
<TextInput
style={{ borderWidth: 1, borderColor: 'gray', padding: 10 }}
/>
</View>
);
};
export default App;
Después (con StyleSheet):
jsx
import React from 'react';
import { Text, View, TextInput, StyleSheet } from 'react-native';
const App = () => {
return (
<View>
<Text style={styles.texto}>Hola Mundo</Text>
<Text style={styles.texto}>Hola Mundo 2</Text>
<Text style={styles.titulo}>Componente TextInput</Text>
<TextInput
style={styles.textInput}
/>
</View>
);
};
const styles = StyleSheet.create({
texto: {
fontSize: 30,
fontWeight: 'bold',
},
titulo: {
margin: 5,
fontSize: 20,
fontWeight: 'bold',
color: 'gray',
},
textInput: {
borderWidth: 1,
borderColor: 'gray',
padding: 10,
},
});
export default App;
6. Combinar múltiples estilos
Se pueden aplicar varios estilos usando un array:
jsx
<View style={[styles.cajaSize, styles.bordeVerde]} />
Ejemplo:
jsx
const styles = StyleSheet.create({
cajaSize: {
width: 150,
height: 150,
},
bordeVerde: {
borderWidth: 2,
borderColor: 'green',
},
});
7. Diferencias clave con CSS
8. Ejemplo completo con componentes variados
jsx
import React from 'react';
import { View, Text, TextInput, Image, ScrollView, StyleSheet } from 'react-native';
const App = () => {
return (
<ScrollView>
<Text style={styles.titulo}>Componente TextInput</Text>
<TextInput
style={styles.textInput}
onChangeText={(valor) => console.log(valor)}
/>
<Text style={styles.titulo}>Componente View</Text>
<View style={styles.fila}>
<View style={[styles.caja, { backgroundColor: 'green' }]} />
<View style={[styles.caja, { backgroundColor: 'black' }]} />
<View style={[styles.caja, { backgroundColor: 'gray' }]} />
</View>
<Text style={styles.titulo}>Componente Text</Text>
<Text style={styles.textoGrande}>Hola Mundo</Text>
<Text style={styles.textoGrande}>Hola Mundo 2</Text>
<Text style={styles.titulo}>Componente Image</Text>
<Image
style={styles.cajaSize}
source={require('./imgs/ejemplo.jpg')}
/>
<Image
style={styles.cajaSize}
source={{ uri: 'https://ejemplo.com/imagen.jpg' }}
/>
</ScrollView>
);
};
const styles = StyleSheet.create({
titulo: {
margin: 5,
fontSize: 20,
fontWeight: 'bold',
color: 'gray',
},
textoGrande: {
fontSize: 30,
fontWeight: 'bold',
},
textInput: {
borderWidth: 1,
borderColor: '#ccc',
borderRadius: 5,
padding: 10,
marginHorizontal: 5,
marginBottom: 15,
},
fila: {
flex: 1,
flexDirection: 'row',
justifyContent: 'space-around',
marginBottom: 15,
},
caja: {
width: 80,
height: 80,
},
cajaSize: {
width: 150,
height: 150,
margin: 10,
alignSelf: 'center',
},
});
export default App;
9. Buenas prácticas
Nombres descriptivos: Usar nombres claros (titulo, botonPrincipal, contenedor).
Reutilizar estilos: Evitar duplicar definiciones.
Ordenar propiedades: Agrupar por tipo (dimensiones, colores, márgenes).
Usar constantes para colores/tamaños: Para mantener consistencia.
Combinar estilos dinámicos: Usar arrays para estilos condicionales.
Ejercicio propuesto:
Toma un componente existente con estilos en línea.
Crea un objeto styles con StyleSheet.create().
Reemplaza todos los estilos en línea por referencias a styles.
Identifica estilos repetidos y créalos una sola vez.
Prueba combinando dos o más estilos en un mismo componente.
Conclusión:
StyleSheet es una herramienta esencial para desarrollar aplicaciones React Native mantenibles y eficientes. Al separar los estilos del JSX, logramos:
✅ Código más limpio y legible.
✅ Mejor rendimiento.
✅ Fácil mantenimiento y actualización.
✅ Validación de propiedades.
Recuerda: Los estilos en React Native son similares a CSS, pero con sintaxis en camelCase y sin unidades en la mayoría de casos (excepto en strings como '100%' o 'auto').
📌 En el próximo video: Aprenderemos a manejar dimensiones responsivas para adaptar nuestra aplicación a diferentes tamaños de pantalla.
Comentarios
Publicar un comentario