Cómo crear un stack de navegación en React Native

¿Te interesa aprender a gestionar eficazmente la navegación entre pantallas en tus aplicaciones de React Native? El stack de navegación es una técnica clave que permite a los usuarios desplazarse naturalmente por tus aplicaciones. En esta guía aprenderemos el paso a paso para crear un stack y realizar una navegación sencilla mediante botones en React Native, mejorando así la experiencia de usuario de manera notable.

¿Cómo crear pantallas básicas en React Native?

Crear pantallas o screens básicas en nuestra aplicación es el primer paso esencial:

• Dentro de SRC, crea una nueva carpeta llamada screens.
• Genera dos archivos: homeScreen.js y settingsScreen.js.
• Usa la función rápida para creación de componentes en React Native:

  import React from 'react';
  import { View, Text } from 'react-native';
  
  export default function HomeScreen() {
    return (
      <View>
        <Text>Estamos en Home Screen</Text>
      </View>
    );
  }

Este proceso se repite para la pantalla settingsScreen.js, ajustando el texto según corresponda.

¿Qué necesitas para integrar un stack de navegación?

Para administrar la navegación entre pantallas, es necesario incorporar lo siguiente:

• Instala y usa la librería @react-navigation/stack:

  import { createStackNavigator } from '@react-navigation/stack';
  
  const Stack = createStackNavigator();

• Define tus pantallas dentro del navigator:

  <Stack.Navigator initialRouteName="Home">
    <Stack.Screen name="Home" component={HomeScreen} />
    <Stack.Screen name="Settings" component={SettingsScreen} />
  </Stack.Navigator>

El orden de las pantallas determina cuál aparece primero, aunque se puede establecer una ruta inicial específica mediante la propiedad initialRouteName.

¿Cómo navegar entre pantallas utilizando botones?

Implementar la navegación mediante botones en React Native implica:

• Extraer la propiedad navigation desde props para usar la función navigate:

  const { navigation } = props;
  
  const goToSettings = () => {
    navigation.navigate('Settings');
  };

• Crear botones reactivos que llamen a esta función:

  <Button title="Ir a Ajustes" onPress={goToSettings} />

Siguiendo estos pasos, se consigue que al pulsar un botón los usuarios se desplacen fácilmente hacia otras pantallas, con funcionalidad integrada y coherencia visual.

¿Cómo realizar navegación parametrizada entre pantallas?

Además, se puede optimizar avanzando un poco más:

• Usa funciones genéricas con parámetros para reutilizar código eficazmente:

  const goToPage = (pageName) => {
    navigation.navigate(pageName);
  };

• Invoca esta función desde un botón especificando el destino:

  <Button title="Ir a Home" onPress={() => goToPage('Home')} />

Esta técnica simplifica el manejo de múltiples pantallas, facilitando su mantenimiento y escalabilidad futura.

Te invitamos a implementar estas técnicas y compartir tus resultados y experiencias en los comentarios.