Componentes básicos de React Native: View, Text, Image y StyleSheet

Concepto clave

En React Native, los componentes básicos son los bloques de construcción fundamentales para crear interfaces de usuario nativas. A diferencia del desarrollo web tradicional donde usas HTML con elementos como div, span o img, React Native proporciona componentes específicos que se traducen a elementos nativos de iOS y Android. Los cuatro componentes esenciales que dominarás en esta lección son:

View: Es el contenedor básico equivalente a un div en la web. Sirve para agrupar otros componentes, aplicar estilos y manejar layouts con Flexbox.

Text: Se utiliza para mostrar texto en pantalla. A diferencia de la web donde el texto puede ir directamente en cualquier elemento, en React Native todo el texto debe estar envuelto en un componente Text.

Image: Permite mostrar imágenes desde recursos locales o remotos. Es crucial entender las diferencias entre cargar imágenes estáticas (require) y dinámicas (URI).

StyleSheet: No es un componente visual, sino un sistema para definir y reutilizar estilos de manera optimizada. Similar a CSS en la web, pero con diferencias clave en sintaxis y capacidades.

Cómo funciona en la práctica

Imagina que estás construyendo el perfil de usuario de una app de redes sociales. Necesitarás:

1. Un contenedor principal (View) que organice todos los elementos
2. Una imagen de perfil (Image) que muestre la foto del usuario
3. Varios textos (Text) para el nombre, biografía y estadísticas
4. Estilos (StyleSheet) para dar formato y posicionamiento

El flujo de trabajo típico sería:

1. Importar los componentes desde 'react-native'
2. Crear un componente funcional que devuelva la estructura JSX
3. Definir los estilos usando StyleSheet.create()
4. Combinar los componentes básicos para formar la interfaz

La magia de Expo es que no necesitas configurar Xcode o Android Studio para ver los resultados - puedes ejecutar la app inmediatamente en tu dispositivo o emulador.

Codigo en accion

Veamos un ejemplo completo de un componente de perfil de usuario:

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

const UserProfile = () => {
  return (
    
      
      
        María González
        Desarrolladora móvil con 3 años de experiencia en React Native
        
          245 seguidores
          156 seguidos
          89 publicaciones
        
      
    
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    padding: 16,
    backgroundColor: '#ffffff',
    borderRadius: 8,
    margin: 8,
  },
  profileImage: {
    width: 80,
    height: 80,
    borderRadius: 40,
    marginRight: 16,
  },
  textContainer: {
    flex: 1,
    justifyContent: 'center',
  },
  name: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 4,
  },
  bio: {
    fontSize: 14,
    color: '#666666',
    marginBottom: 12,
  },
  statsContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  stat: {
    fontSize: 12,
    color: '#888888',
  },
});

export default UserProfile;

Ahora veamos cómo refactorizar un código inicial para mejorarlo:

Antes (estilos inline, estructura desorganizada):

const BadExample = () => (
  
    
    Mi App
  
);

Después (usando StyleSheet, código más mantenible):

const styles = StyleSheet.create({
  container: { flexDirection: 'row', padding: 10 },
  logo: { width: 50, height: 50 },
  title: { fontSize: 16, color: 'black' }
});

const GoodExample = () => (
  
    
    Mi App
  
);

Errores comunes

1. Olvidar que todo texto debe estar en componentes Text: Intentar poner texto directamente dentro de View causará un error. Siempre envuelve el texto en .
2. Confundir source en Image: Para imágenes locales usas require('./ruta/imagen.png'), para remotas usas {{ uri: 'https://...' }}. Mezclarlas causará errores.
3. No usar StyleSheet.create(): Definir estilos inline o como objetos simples funciona, pero StyleSheet.create() optimiza el rendimiento y permite validación.
4. Ignorar el manejo de dimensiones de imágenes: Si no defines width y height en Image, la imagen podría no mostrarse o distorsionarse.
5. Anidamiento excesivo de Views: Cada View adicional tiene costo de rendimiento. Planifica tu layout para minimizar Views innecesarios.

Checklist de dominio

• Puedo crear un contenedor con View y aplicar estilos de layout con Flexbox
• Sé mostrar y formatear texto usando el componente Text con diferentes estilos
• Puedo cargar imágenes tanto locales como remotas usando el componente Image correctamente
• Utilizo StyleSheet.create() para definir y organizar todos mis estilos
• Comprendo la diferencia entre estilos inline y StyleSheet, y cuándo usar cada uno
• Soy capaz de combinar View, Text e Image para crear interfaces complejas
• Puedo identificar y corregir errores comunes relacionados con estos componentes

Crear una tarjeta de producto para una app de e-commerce

En este ejercicio práctico, crearás un componente reutilizable para mostrar productos en una app de comercio electrónico. Sigue estos pasos:

1. Crea un nuevo archivo llamado ProductCard.js en tu proyecto de Expo
2. Importa los componentes necesarios: View, Text, Image y StyleSheet desde 'react-native'
3. Define un componente funcional llamado ProductCard que acepte props para: nombre, precio, imagen URL y descripción
4. Diseña la tarjeta con:
   • Una imagen del producto en la parte superior
   • El nombre del producto en negrita debajo de la imagen
   • El precio con formato de moneda (ej: $99.99)
   • Una descripción más pequeña debajo del precio
   • Un badge de "Nuevo" o "En oferta" condicional (opcional)
5. Usa StyleSheet.create() para definir todos los estilos, incluyendo:
   • Contenedor principal con sombra y bordes redondeados
   • Estilos específicos para cada elemento (imagen, nombre, precio, descripción)
   • Espaciado consistente entre elementos
6. Exporta el componente y úsalo en tu App.js con al menos 3 productos diferentes
7. Prueba tu componente en el emulador o dispositivo real

Requisitos técnicos:

• La imagen debe cargarse desde una URL remota
• El precio debe formatearse a 2 decimales
• Usa Flexbox para el layout
• Maneja correctamente productos sin descripción (prop opcional)

Pistas

• Recuerda que las imágenes remotas en Image necesitan width y height explícitos o resizeMode
• Puedes usar toFixed(2) para formatear el precio a 2 decimales
• Considera usar conditional rendering para el badge opcional: {isNew && Nuevo}

Evalua tu comprension

Completa el quiz interactivo de arriba para ganar XP.