Práctica: Construye una pantalla de perfil de usuario con estilos

Concepto clave

En React Native con Expo, construir una pantalla de perfil de usuario es un ejercicio fundamental que combina componentes básicos con estilos flexbox. Imagina que estás diseñando una tarjeta de presentación digital: necesitas organizar información como nombre, foto, descripción y botones de acción en un espacio limitado de la pantalla del móvil. La clave está en entender cómo View, Text, Image y TouchableOpacity trabajan juntos, usando estilos para controlar el diseño de manera responsiva.

Una analogía del mundo real sería armar un rompecabezas: cada componente es una pieza (como la foto o el nombre), y los estilos son las instrucciones que dicen dónde colocar cada pieza en el tablero (la pantalla). En nivel intermedio, ya no solo apilas componentes, sino que los alineas con precisión usando propiedades como justifyContent y alignItems, creando una interfaz que se vea bien en cualquier dispositivo iOS o Android.

Cómo funciona en la práctica

Vamos a construir una pantalla de perfil paso a paso. Primero, crea un nuevo proyecto en Expo si no tienes uno: ejecuta expo init PerfilApp y elige una plantilla en blanco. Luego, abre App.js y sigue estos pasos:

1. Importa los componentes necesarios de React Native: View, Text, Image, TouchableOpacity, y StyleSheet.
2. Define un componente funcional llamado PerfilScreen que devuelve un View principal.
3. Dentro, agrega un Image para la foto de perfil, usando una URI de ejemplo o una imagen local.
4. Añade Text para el nombre, título y descripción, organizándolos en View anidados.
5. Crea botones con TouchableOpacity para acciones como "Editar Perfil" o "Seguir".
6. Define estilos con StyleSheet.create, enfocándote en márgenes, paddings, y alineación flexbox.

Este proceso te enseña a estructurar una pantalla real, no solo teoría. Por ejemplo, antes de aplicar estilos, los componentes pueden verse desordenados; después, con flexDirection: 'column' y alignItems: 'center', se alinean limpiamente.

Codigo en accion

Aquí tienes un ejemplo funcional y copiable. Primero, el código inicial sin estilos avanzados:

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

export default function PerfilScreen() {
  return (
    
      
      Juan Pérez
      Desarrollador Mobile
      Apasionado por React Native y Expo.
      
        Editar Perfil
      
    
  );
}

Ahora, refactorizado con estilos completos para una mejor apariencia:

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

export default function PerfilScreen() {
  return (
    
      
      
        Juan Pérez
        Desarrollador Mobile
        
          Apasionado por React Native y Expo. Creando apps nativas para iOS y Android.
        
      
      
        
          Editar Perfil
        
        
          Seguir
        
      
    
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
    backgroundColor: '#f5f5f5',
  },
  foto: {
    width: 120,
    height: 120,
    borderRadius: 60,
    marginBottom: 20,
  },
  infoContainer: {
    alignItems: 'center',
    marginBottom: 30,
  },
  nombre: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 5,
  },
  titulo: {
    fontSize: 16,
    color: '#666',
    marginBottom: 10,
  },
  descripcion: {
    fontSize: 14,
    color: '#333',
    textAlign: 'center',
    lineHeight: 20,
  },
  botonesContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    width: '80%',
  },
  boton: {
    backgroundColor: '#007AFF',
    paddingVertical: 12,
    paddingHorizontal: 25,
    borderRadius: 8,
    flex: 1,
    marginHorizontal: 5,
  },
  botonTexto: {
    color: '#fff',
    textAlign: 'center',
    fontWeight: '600',
  },
  botonSecundario: {
    backgroundColor: 'transparent',
    borderWidth: 1,
    borderColor: '#007AFF',
  },
  botonSecundarioTexto: {
    color: '#007AFF',
    textAlign: 'center',
    fontWeight: '600',
  },
});

Errores comunes

• Olvidar flex: 1 en el contenedor principal: Sin esto, la pantalla puede no ocupar todo el espacio, causando contenido cortado. Solución: Asegúrate de que el View raíz tenga flex: 1 para expandirse.
• Usar estilos inline en exceso: Hace el código difícil de mantener. En su lugar, define todos los estilos en StyleSheet.create para mejor rendimiento y claridad.
• No probar en diferentes tamaños de pantalla: Los estilos pueden verse bien en un dispositivo pero mal en otro. Usa herramientas como el simulador de Expo o dispositivos reales para verificar la responsividad.
• Ignorar la accesibilidad en TouchableOpacity: No agregar accessible y accessibilityLabel puede afectar a usuarios con discapacidades. Siempre incluye estas props para botones.
• Usar URIs de imagen no válidas: Si la imagen no carga, la pantalla se ve rota. Verifica que la URI sea correcta o usa imágenes locales como fallback.

Checklist de dominio

1. ¿Puedes crear un componente de pantalla con View, Text, Image y TouchableOpacity?
2. ¿Sabes usar StyleSheet.create para definir estilos reutilizables y optimizados?
3. ¿Controlas el layout con flexbox, usando propiedades como justifyContent y alignItems?
4. ¿Eres capaz de diseñar botones estilizados con estados hover (usando onPress)?
5. ¿Verificas que la pantalla sea responsiva en iOS y Android con Expo Go?
6. ¿Manejas errores comunes como imágenes no cargadas o estilos rotos?
7. ¿Puedes refactorizar código para mejorar legibilidad y mantenimiento?