7.5-10. ¿Como funcionan los estilos en React Native?

 ¿Cómo funcionan los estilos en React Native?

En React Native, los estilos no usan CSS tradicional, sino un sistema basado en objetos JavaScript similar. ¡Te explico cómo dominarlo!

📌 Componente clave: StyleSheet

Es el equivalente a una hoja de estilos CSS, pero en formato de objeto:

javascript

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  contenedor: {
    borderRadius: 10,
    borderWidth: 2,
    borderColor: '#000',
  },
  titulo: {
    fontSize: 19,
    fontWeight: 'bold',
  },
});

🔥 Características importantes:

1. Soporte por componente: Cada elemento (View, Text, etc.) acepta estilos con atributos específicos.

2. Múltiples estilos: Pásalos como un arreglo:

   javascript

   <Text style={[styles.titulo, styles.centrado]}>Hola</Text>

3. Estilos dinámicos: Usa condicionales para cambiar estilos:

   javascript

   <Text style={[styles.titulo, isActive && styles.tituloActivo]}>Botón</Text>

⚠️ Buenas prácticas:

• Evita estilos en línea: Aunque es posible, dificulta la legibilidad y mantenimiento.

• Nombrado claro: Usa convenciones como BEM (ej: contenedor__titulo--activo).

• Documentación oficial: Revisa los métodos de StyleSheet.

📹 ¿Quieres ver el ejemplo en acción? Mira el video completo aquí (2:34 min).

---

💬 ¿Tienes dudas o tips adicionales? ¡Compártelos en los comentarios!

---

🔍 Optimización:

• Emojis para destacar secciones.

• Código embebido con sintaxis resaltada.

• Llamado a la acción (CTA) para engagement.

• Enlace a documentación como recurso adicional.