El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Navegador de Pila

Siguiente ►
►

En esta lección, aprenderemos sobre el Navegador de Pila (Stack Navigator) en React Navigation, una de las bibliotecas más populares para manejar la navegación en aplicaciones React Native. El Navegador de Pila permite apilar pantallas una sobre otra y navegar hacia atrás a través de la pila.

Objetivos de Aprendizaje

  • Comprender el concepto de navegación en pila.
  • Configurar React Navigation en un proyecto de React Native.
  • Implementar un Navegador de Pila básico.
  • Navegar entre diferentes pantallas utilizando el Navegador de Pila.
  • Pasar parámetros entre pantallas.

Conceptos Clave

¿Qué es un Navegador de Pila?

Un Navegador de Pila organiza las pantallas en una estructura de pila (stack). Cada vez que se navega a una nueva pantalla, esta se apila sobre la anterior. Al presionar el botón de retroceso, se desapila la pantalla actual y se vuelve a la pantalla anterior.

Instalación de React Navigation

Para usar React Navigation, primero necesitamos instalar las dependencias necesarias.

npm install @react-navigation/native
npm install @react-navigation/stack
npm install react-native-screens react-native-safe-area-context

Configuración Básica

Después de instalar las dependencias, configuramos React Navigation en nuestro proyecto.

// App.js
import * as React from 'react';
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();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

Creación de Pantallas

Creamos dos pantallas básicas: HomeScreen y DetailsScreen.

// screens/HomeScreen.js
import React from 'react';
import { Button, View, Text } from 'react-native';

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

export default HomeScreen;
// screens/DetailsScreen.js
import React from 'react';
import { View, Text } from 'react-native';

function DetailsScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
    </View>
  );
}

export default DetailsScreen;

Navegación entre Pantallas

Utilizamos el método navigate para movernos entre pantallas.

<Button
  title="Go to Details"
  onPress={() => navigation.navigate('Details')}
/>

Pasando Parámetros entre Pantallas

Podemos pasar parámetros a las pantallas utilizando el método navigate.

// HomeScreen.js
<Button
  title="Go to Details"
  onPress={() => navigation.navigate('Details', { itemId: 86, otherParam: 'anything you want here' })}
/>

// DetailsScreen.js
function DetailsScreen({ route, navigation }) {
  const { itemId, otherParam } = route.params;

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
      <Text>itemId: {JSON.stringify(itemId)}</Text>
      <Text>otherParam: {JSON.stringify(otherParam)}</Text>
    </View>
  );
}

Ejercicio Práctico

Ejercicio 1: Crear una Nueva Pantalla y Navegar

  1. Crea una nueva pantalla llamada ProfileScreen.
  2. Añade un botón en HomeScreen que navegue a ProfileScreen.
  3. En ProfileScreen, muestra un mensaje de bienvenida.

Solución

// screens/ProfileScreen.js
import React from 'react';
import { View, Text } from 'react-native';

function ProfileScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Welcome to the Profile Screen</Text>
    </View>
  );
}

export default ProfileScreen;
// App.js
import ProfileScreen from './screens/ProfileScreen';

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;
// HomeScreen.js
<Button
  title="Go to Profile"
  onPress={() => navigation.navigate('Profile')}
/>

Resumen

En esta lección, hemos aprendido a configurar y utilizar el Navegador de Pila en React Navigation. Hemos cubierto cómo navegar entre pantallas y cómo pasar parámetros entre ellas. Estos conceptos son fundamentales para construir aplicaciones móviles con múltiples pantallas y una navegación fluida. En la próxima lección, exploraremos el Navegador de Pestañas (Tab Navigator).

◄ Anterior
◄
Siguiente ►
►
El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados