7.1-19. Creación de estilos

 

Creación de Estilos en React Native: Buenas Prácticas

En el post anterior, creamos nuestro primer componente en React Native. Hoy vamos a profundizar en cómo estructurar correctamente los estilos para mantener un código limpio y escalable.

🚫 Evita los Estilos "Inline"

En el ejemplo anterior, definimos los estilos directamente en el componente:

jsx

<View style={{ width: 50, height: 50, backgroundColor: 'red' }} />

Aunque funciona, no es una buena práctica porque:

• Dificulta el mantenimiento en proyectos grandes.

• Hace el código menos legible.

• No permite reutilizar estilos.

✅ La Forma Correcta: Objetos de Estilo

React Native recomienda definir los estilos en un objeto separado usando StyleSheet.create():

jsx

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

function MiComponente() {
  return <View style={styles.mainContainer} />;
}

const styles = StyleSheet.create({
  mainContainer: {
    width: 50,
    height: 50,
    backgroundColor: 'red',
  },
});

Beneficios:

✔ Mejor organización: Los estilos están agrupados.
✔ Validación de propiedades: StyleSheet ayuda a detectar errores.
✔ Optimización: Mejor rendimiento en comparación con objetos inline.

🎨 Propiedades de Estilo Más Usadas

Los componentes en React Native aceptan múltiples propiedades de estilo. Algunas de las más comunes:

Estilos Básicos

js

{
  width: 100,       // Ancho en píxeles  
  height: 100,      // Alto en píxeles  
  backgroundColor: 'blue',  // Color de fondo  
  borderRadius: 25,  // Bordes redondeados (50% = círculo)  
  borderWidth: 5,    // Grosor del borde  
  borderColor: 'green', // Color del borde  
}

Flexbox (Diseño Responsive)

js

{
  flex: 1,           // Ocupa todo el espacio disponible  
  justifyContent: 'center', // Centra elementos hijos (vertical)  
  alignItems: 'center',     // Centra elementos hijos (horizontal)  
}

Espaciado

js

{
  margin: 10,        // Margen exterior  
  padding: 20,       // Espacio interno  
}

Transformaciones (Animaciones)

js

{
  transform: [  
    { rotate: '45deg' },  // Rotación  
    { scaleX: 1.5 },      // Escala en eje X  
  ],  
}

📂 ¿Archivo Separado o Estilos en el Mismo Componente?

Hay dos enfoques válidos:

1. Estilos dentro del componente

jsx

// MiComponente.tsx
const styles = StyleSheet.create({ ... });

✅ Ideal para componentes pequeños.

2. Estilos en un archivo aparte

jsx

// styles.ts
export default StyleSheet.create({ ... });

// MiComponente.tsx
import styles from './styles';

✅ Recomendado para componentes complejos o estilos reutilizables.

🔄 Reutilizando Estilos

Puedes combinar múltiples estilos usando un array:

jsx

<View style={[styles.base, styles.extra]} />

🎯 Conclusión

• Usa StyleSheet.create() en lugar de estilos inline.

• Organiza tus estilos al final del componente o en un archivo separado.

• Aprovecha Flexbox para diseños responsive.

En el próximo post, veremos cómo crear componentes reutilizables con props.