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

Contenido del curso

Configuración del entorno de desarrollo

Primeros pasos con React Native

React Navigation

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0012:08

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

Curso de Introducción a React Native

Clase 14 de 16

Clase 14 / 16

Recursos

¿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.

Santiago Andrés Santofimio Tovar

Hace 3 años

Para los que ven el curso en el 2024, les recomiendo leer toda la documentación.

usa el siguiente código en el archivo: NavigationStack.js

import { createNativeStackNavigator } from "@react-navigation/native-stack";
import HomeScreen from "../screens/HomeScreen";
import Settings from "../screens/SettingsScreen";

const Stack = createNativeStackNavigator();

export default function NavigationStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="HomeScreen" component={HomeScreen}></Stack.Screen>
      <Stack.Screen name="Settings" component={Settings}></Stack.Screen>
    </Stack.Navigator>
  );
}

Usa el siguiente código en el archivo: HomeScreen.js

import * as React from "react";
import { Text, View, Button } from "react-native";

export default function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Button
        title="Go to Profile"
        onPress={() => navigation.navigate("Profile")}
      />
    </View>
  );
}

Usa el siguiente código para el archivo: SettingsScreen.js

import * as React from "react";
import { Text, View, Button } from "react-native";

export default function SettingsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Button title="Go back" onPress={() => navigation.goBack()} />
    </View>
  );
}

Comentarios (35)35 comentarios

Misael Valdez

Hace 5 años

Luis Fernando Pedroza Taborda

Laura Acuña

Hace 4 años

César Andrés Baudi Ventura

Veronica Osorio Cardona

Rodrigo Andres Ramírez Aguirre

Hector Vinasco

Gregson Murcia Castro

Luis Felipe Del Risco Racero

Francisco Santopietro

Jorge Arteaga

Nataya Soledad Flores

Myriam Yamila Arru

María Antonia Lobato

Darío Condori Humerez

Cesar Augusto Acjota Merma

Jovanny Enrique Ruiz Lovera

Hace 2 años

Julian Andres Builes Cajiao

Agustín Navarro Galdon

Profesor

Norge Santana Gonzalez

Patrick Jhonatan Hernandez Blanco

David Silgado

Kevin Parra Lopez

Carlos Daniel Galván Morales

Santiago Perea Murillo

Hace un año

Arlen

Jair Yara

Vladimir Farrera Vera

Configuración del entorno de desarrollo

Desarrollo de Apps Móviles con React Native y Expo

Instalación de Visual Studio Code para React Native

Configuración de Visual Studio Code para React Native

Instalación de Node JS y creación de proyectos React Native con Expo

Instalación del emulador de Xcode para aplicaciones iOS

Instalación de Android Studio y creación de emulador

Ejecutar aplicaciones React Native en dispositivos físicos con Expo Go

Primeros pasos con React Native

Estructura de un proyecto React Native con Expo

Creación de componentes de React Native con Expo

Props en React Native: envío de datos entre componentes

Asignación de default props en componentes React

Validación de Props con PropTypes en React

React Navigation

Instalación de React Navigation versión 5 en React Native con Expo

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

Creación de menú de pestañas en React Navigation

Drawer Navigation en React Native

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

Progreso del curso

Configuración del entorno de desarrollo

Primeros pasos con React Native

React Navigation

Recursos

Recursos