Práctica: App de lista de tareas con navegación

Concepto clave

En el desarrollo de aplicaciones móviles con React Native y Expo, la navegación entre pantallas es fundamental para crear experiencias de usuario fluidas. Imagina una aplicación como un libro: cada pantalla es una página, y la navegación es el índice que te permite saltar entre capítulos. En React Native, utilizamos bibliotecas como React Navigation para gestionar este flujo, permitiendo transiciones suaves entre diferentes vistas, como una lista de tareas y un formulario para agregar nuevas.

La navegación basada en pilas (stack navigation) es común en apps móviles: al abrir una nueva pantalla, se apila sobre la anterior, y al retroceder, se desapila. Esto es similar a cómo funcionan las aplicaciones nativas de iOS y Android. Expo simplifica este proceso al proporcionar herramientas integradas y compatibilidad cruzada, asegurando que tu app se comporte de manera consistente en ambos sistemas operativos.

Cómo funciona en la práctica

Para implementar una app de lista de tareas con navegación, seguimos estos pasos: primero, configuramos un proyecto Expo e instalamos React Navigation. Luego, definimos dos pantallas principales: una para mostrar la lista de tareas y otra para agregar o editar tareas. Utilizamos un stack navigator para manejar la transición entre ellas, pasando datos como parámetros de navegación.

Por ejemplo, al tocar un botón "Agregar tarea", navegamos a la pantalla de formulario. Después de guardar, regresamos a la lista con la nueva tarea actualizada. Esto se logra usando funciones como navigation.navigate() y navigation.goBack(), que controlan el flujo de la app. Asegúrate de estructurar tu código en componentes reutilizables para mantenerlo limpio y escalable.

Código en acción

Aquí tienes un ejemplo básico de configuración de navegación con React Navigation en Expo:

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

const Stack = createStackNavigator();

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

Y un ejemplo de cómo navegar desde la lista de tareas al formulario:

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

export default function TaskListScreen({ navigation }) {
  const handleAddTask = () => {
    navigation.navigate('AddTask');
  };

  return (
    
      
      {/* Lista de tareas aquí */}
    
  );
}

Errores comunes

• Olvidar envolver la app en NavigationContainer: Sin esto, la navegación no funcionará. Siempre incluye <NavigationContainer> en el componente raíz.
• No pasar correctamente los parámetros de navegación: Al navegar, usa navigation.navigate('ScreenName', { param: value }) para enviar datos, y accede con route.params en la pantalla destino.
• Ignorar el manejo del estado de las tareas: La lista de tareas debe actualizarse al agregar nuevas. Usa estado global (como Context) o pasa callbacks entre pantallas para sincronizar datos.
• No probar en ambos dispositivos (iOS y Android): Expo facilita esto, pero asegúrate de verificar que los gestos de navegación (como deslizar para atrás) funcionen correctamente en cada plataforma.
• Sobrecargar una pantalla con lógica: Separa responsabilidades; por ejemplo, maneja la UI en el componente y la lógica de negocio en hooks o servicios.

Checklist de dominio

1. Configurar React Navigation en un proyecto Expo desde cero.
2. Crear al menos dos pantallas navegables con un stack navigator.
3. Pasar y recibir parámetros entre pantallas correctamente.
4. Actualizar el estado de la lista de tareas al agregar o eliminar items.
5. Implementar navegación con botones y gestos nativos.
6. Probar la app en un emulador iOS y Android para verificar compatibilidad.
7. Manejar errores de navegación, como rutas no definidas.

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

Sigue estos pasos para construir una app funcional que permita agregar, ver y eliminar tareas, con navegación entre pantallas:

1. Inicia un nuevo proyecto Expo usando npx create-expo-app TaskApp y navega al directorio.
2. Instala React Navigation y sus dependencias: npm install @react-navigation/native @react-navigation/stack y luego npx expo install react-native-screens react-native-safe-area-context.
3. Crea dos componentes de pantalla en una carpeta screens: TaskListScreen.js para mostrar la lista y AddTaskScreen.js para el formulario.
4. Configura la navegación en App.js usando el código de ejemplo proporcionado en la lección.
5. En TaskListScreen, implementa un estado inicial con un array de tareas (ej., [{ id: 1, text: 'Tarea de ejemplo' }]) y muéstralas en una lista FlatList.
6. Añade un botón que navegue a AddTaskScreen usando navigation.navigate.
7. En AddTaskScreen, crea un formulario con un TextInput y un botón para guardar. Al guardar, pasa la nueva tarea como parámetro a TaskListScreen y actualiza el estado allí.
8. Agrega funcionalidad para eliminar tareas deslizando o con un botón en cada item.
9. Prueba la app en un emulador o dispositivo físico usando npx expo start.

Pistas

• Usa el hook useState de React para manejar el estado de las tareas en TaskListScreen.
• Para pasar datos entre pantallas, envia un objeto como segundo parámetro en navigation.navigate y recíbelo con route.params.
• Considera usar AsyncStorage de Expo para persistir las tareas localmente y cargarlas al iniciar la app.

Evalua tu comprension

Completa el quiz interactivo de arriba para ganar XP.