Configuración de React Navigation para navegación entre pantallas

Concepto clave

La navegación en aplicaciones móviles es como el sistema de calles de una ciudad: permite a los usuarios moverse entre diferentes pantallas (destinos) de manera organizada. React Navigation es la biblioteca estándar en React Native para gestionar esta navegación, proporcionando componentes y configuraciones que simulan la experiencia nativa de iOS y Android. Sin una navegación adecuada, tu app sería como una casa con puertas que no llevan a ninguna parte: los usuarios quedarían atrapados en una sola pantalla.

En el contexto de Expo, React Navigation se integra perfectamente sin necesidad de configuración nativa adicional, lo que acelera el desarrollo. Imagina que cada pantalla es una habitación en un edificio: React Navigation te da las herramientas para crear puertas (botones, gestos) que conectan estas habitaciones, manteniendo un historial de navegación (como un mapa de dónde has estado) y permitiendo pasar información entre ellas (como llevar objetos de una habitación a otra).

Cómo funciona en la práctica

Para implementar React Navigation en tu proyecto de Expo, sigue estos pasos. Primero, asegúrate de tener un proyecto Expo creado (puedes usar npx create-expo-app). Luego, instala las dependencias necesarias desde la terminal:

npx expo install @react-navigation/native @react-navigation/stack

Esto instala el núcleo de React Navigation y el stack navigator, que es ideal para apps con un flujo lineal de pantallas (como un proceso de registro). Expo maneja automáticamente las dependencias nativas, así que no necesitas ejecutar pod install o similares. Una vez instalado, importa los componentes en tu archivo principal (por ejemplo, App.js) y configura el navegador básico.

Antes de la configuración, tu app podría tener solo una pantalla estática. Después, podrás definir múltiples pantallas y navegar entre ellas. Por ejemplo, antes tenías un componente simple; ahora, envolverás tu app en un NavigationContainer y definirás un stack de pantallas.

Codigo en accion

Aquí tienes un ejemplo funcional de configuración básica con un stack navigator. Crea un archivo App.js en tu proyecto Expo y copia este código:

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

// Pantallas de ejemplo
function HomeScreen({ navigation }) {
  return (
    
      Pantalla de Inicio
       navigation.navigate('Details')}
      />
    
  );
}

function DetailsScreen({ navigation }) {
  return (
    
      Pantalla de Detalles
       navigation.goBack()}
      />
    
  );
}

const Stack = createStackNavigator();

function App() {
  return (
    
      
        
        
      
    
  );
}

export default App;

Este código configura dos pantallas (Home y Details) con navegación entre ellas. El NavigationContainer es el contenedor raíz que gestiona el estado de navegación. El Stack.Navigator define el orden de las pantallas, y cada Stack.Screen asocia un nombre con un componente. Para que funcione, asegúrate de importar View, Text, y Button de react-native.

Errores comunes

• Olvidar envolver la app en NavigationContainer: Sin esto, la navegación no funcionará. Siempre inclúyelo como componente raíz.
• Usar nombres incorrectos en navigation.navigate(): El nombre debe coincidir exactamente con el definido en Stack.Screen. Verifica mayúsculas y minúsculas.
• No manejar imports correctamente: Asegúrate de importar createStackNavigator desde @react-navigation/stack y no de versiones obsoletas.
• Ignorar el initialRouteName: Si no lo configuras, React Navigation usará la primera pantalla en el stack, lo que podría no ser la deseada.
• No probar en ambos iOS y Android: Algunos comportamientos de navegación pueden variar; usa el simulador de Expo para verificar.

Checklist de dominio

1. Instalé React Navigation y sus dependencias usando npx expo install.
2. Configuré un NavigationContainer como raíz de mi app.
3. Definí al menos dos pantallas usando createStackNavigator.
4. Implementé navegación entre pantallas con navigation.navigate() y navigation.goBack().
5. Probé la navegación en un simulador de Expo (iOS y Android).
6. Verifiqué que los nombres de pantallas coincidan en la configuración y navegación.
7. Entendí el rol de initialRouteName en el stack navigator.

Crear una app de tareas con navegación básica

En este ejercicio, crearás una app simple de lista de tareas con dos pantallas usando React Navigation y Expo. Sigue estos pasos:

1. Crea un nuevo proyecto Expo ejecutando npx create-expo-app TaskApp en tu terminal y navega al directorio del proyecto.
2. Instala React Navigation y el stack navigator con npx expo install @react-navigation/native @react-navigation/stack.
3. En App.js, reemplaza el contenido con un stack navigator que tenga dos pantallas: TaskListScreen (lista de tareas) y TaskDetailScreen (detalles de una tarea).
4. En TaskListScreen, muestra una lista estática de al menos 3 tareas (puedes usar un array de objetos). Cada tarea debe tener un botón que navegue a TaskDetailScreen pasando el nombre de la tarea como parámetro.
5. En TaskDetailScreen, muestra el nombre de la tarea recibido y un botón para volver a la lista.
6. Ejecuta la app con npx expo start y prueba la navegación en un simulador o dispositivo físico.

• Usa el hook useNavigation si necesitas acceder a la navegación dentro de componentes que no son pantallas.
• Para pasar parámetros entre pantallas, usa navigation.navigate('ScreenName', { param: value }) y accede con route.params en la pantalla de destino.
• Asegúrate de importar todos los componentes de React Native necesarios, como FlatList para la lista de tareas.

Evalua tu comprension

Completa el quiz interactivo de arriba para ganar XP.