Estructura de proyectos Expo y navegación básica

Concepto clave

La estructura de proyectos en Expo es como el plano arquitectónico de un edificio: define cómo se organizan los componentes para que la aplicación funcione correctamente en iOS y Android. A diferencia de proyectos React Native puros, Expo abstrae la complejidad nativa, proporcionando una carpeta assets para recursos estáticos, un archivo app.json para configuración, y un punto de entrada principal en App.js. La navegación básica, por otro lado, es el sistema de pasillos que permite a los usuarios moverse entre pantallas; sin ella, la app sería una habitación única sin salida.

Imagina que estás construyendo un centro comercial: la estructura del proyecto son los cimientos y divisiones (carpetas y archivos), mientras que la navegación son las escaleras y pasillos que conectan las tiendas (pantallas). En el mundo real, esto se traduce en una experiencia fluida donde los usuarios pueden ir desde un login hasta un dashboard sin perderse. Expo simplifica esto con herramientas como expo-router o bibliotecas de terceros como React Navigation, que manejan la transición entre componentes de manera eficiente.

Cómo funciona en la práctica

Para empezar, crea un proyecto Expo usando el CLI: abre tu terminal y ejecuta npx create-expo-app MiApp. Esto genera una estructura básica con carpetas como assets (para imágenes y fuentes), node_modules (dependencias), y archivos clave como App.js (el componente raíz) y app.json (configuración de la app). Luego, instala una biblioteca de navegación; por ejemplo, con React Navigation, ejecuta npx expo install react-native-screens react-native-safe-area-context y npm install @react-navigation/native.

Paso a paso: primero, en App.js, importa los componentes necesarios y configura un navegador de pila (Stack Navigator). Crea dos pantallas simples, como HomeScreen y DetailsScreen, en archivos separados dentro de una carpeta screens. En App.js, define las rutas usando createStackNavigator y envuelve todo en NavigationContainer. Finalmente, en HomeScreen, añade un botón que navegue a DetailsScreen usando navigation.navigate('Details'). Ejecuta la app con npx expo start y prueba la navegación en un emulador o dispositivo físico.

Codigo en accion

Aquí tienes un ejemplo funcional de configuración básica con React Navigation. Primero, el archivo App.js antes de agregar navegación:

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    
      ¡Hola, Expo!
      
    
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Después de agregar navegación, App.js se refactoriza así:

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './screens/HomeScreen';
import DetailsScreen from './screens/DetailsScreen';

const Stack = createStackNavigator();

export default function App() {
  return (
    
      
        
        
      
    
  );
}

Y un ejemplo de HomeScreen.js en la carpeta screens:

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

export default function HomeScreen({ navigation }) {
  return (
    
      Pantalla de Inicio
      
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

Errores comunes

• Olvidar instalar dependencias nativas: Al usar React Navigation, no ejecutar npx expo install para paquetes como react-native-screens puede causar errores en iOS/Android. Solución: siempre verifica la documentación y usa expo install para compatibilidad.
• Mal configurar app.json: Poner rutas incorrectas en expo.extra o no definir el slug puede romper la construcción. Solución: revisa el esquema en docs.expo.dev y mantén la configuración mínima.
• No manejar estados de navegación: Navegar sin pasar parámetros o resetear pilas puede llevar a pantallas en blanco. Solución: usa navigation.setParams o bibliotecas como Redux para estado global.
• Ignorar el rendimiento en assets: Cargar imágenes grandes directamente en assets sin optimizar ralentiza la app. Solución: comprime imágenes y usa expo-image para carga eficiente.
• Usar estilos inline excesivos: Esto dificulta el mantenimiento y debugging. Solución: centraliza estilos en StyleSheet.create y reutiliza componentes.

Checklist de dominio

1. Crear un proyecto Expo desde cero usando CLI y entender su estructura de carpetas.
2. Configurar app.json con nombre, slug y versiones para iOS/Android.
3. Instalar y configurar React Navigation con Stack Navigator en App.js.
4. Implementar al menos dos pantallas con navegación básica (navegar y volver).
5. Manejar parámetros entre pantallas usando route.params.
6. Optimizar assets comprimiendo imágenes y usando rutas relativas.
7. Probar la navegación en emulador y dispositivo físico sin errores.

Crear una app de tareas con navegacion entre pantallas

En este ejercicio, construirás una aplicación simple de lista de tareas usando Expo y React Navigation. Sigue estos pasos:

1. Crea un nuevo proyecto Expo llamado TaskApp ejecutando npx create-expo-app TaskApp en tu terminal.
2. Navega a la carpeta del proyecto y instala React Navigation con: npx expo install react-native-screens react-native-safe-area-context y npm install @react-navigation/native @react-navigation/stack.
3. Dentro de la carpeta src (creala si no existe), crea dos archivos: HomeScreen.js y TaskDetailScreen.js.
4. En HomeScreen.js, implementa un componente que muestre una lista estática de tareas (ej., ['Comprar leche', 'Llamar al medico']) y un botón para cada tarea que navegue a TaskDetailScreen, pasando el nombre de la tarea como parámetro.
5. En TaskDetailScreen.js, muestra el nombre de la tarea recibida y un botón para volver a Home.
6. Modifica App.js para usar NavigationContainer y Stack Navigator, configurando las dos pantallas.
7. Ejecuta la app con npx expo start y prueba la navegación en un emulador o escaneando el código QR con la app Expo Go.

Pistas

• Usa FlatList o ScrollView en HomeScreen para renderizar la lista de tareas de manera eficiente.
• En TaskDetailScreen, accede al parámetro con route.params.taskName dentro de la función del componente.
• Si encuentras errores de importación, verifica las rutas en App.js; por ejemplo, usa import HomeScreen from './src/HomeScreen'.

Evalua tu comprension

Completa el quiz interactivo de arriba para ganar XP.