Navegación entre pantallas

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Las aplicaciones móviles rara vez constan de una sola pantalla. La gestión de la presentación y transición entre múltiples pantallas suele manejarse mediante lo que se conoce como un navegador.

Esta guía cubre los diversos componentes de navegación disponibles en React Native. Si estás comenzando con la navegación, probablemente querrás usar React Navigation. React Navigation ofrece una solución de navegación directa, con capacidad para implementar patrones comunes como navegación en pila y navegación por pestañas tanto en Android como en iOS.

Si estás integrando React Native en una aplicación que ya gestiona la navegación de forma nativa, o buscas una alternativa a React Navigation, la siguiente biblioteca proporciona navegación nativa en ambas plataformas: react-native-navigation.

React Navigation

La solución comunitaria para navegación es una biblioteca independiente que permite a los desarrolladores configurar las pantallas de una aplicación con pocas líneas de código.

Plantilla inicial

Si estás comenzando un nuevo proyecto, puedes usar la plantilla de React Navigation para configurar rápidamente un proyecto nuevo con Expo:

shell

npx create-expo-app@latest --template react-navigation/template

Consulta el archivo README.md del proyecto para obtener más información sobre cómo comenzar.

Instalación y configuración

Primero, necesitas instalarlos en tu proyecto:

shell

npm install @react-navigation/native @react-navigation/native-stack

Luego, instala las dependencias peer requeridas. Debes ejecutar comandos diferentes según si tu proyecto es gestionado por Expo o es un proyecto bare de React Native.

• Si tienes un proyecto gestionado por Expo, instala las dependencias con expo:

  shell

  npx expo install react-native-screens react-native-safe-area-context

• Si tienes un proyecto bare de React Native, instala las dependencias con npm:

  shell

  npm install react-native-screens react-native-safe-area-context

  Para iOS con proyecto bare de React Native, asegúrate de tener CocoaPods instalado. Luego instala los pods para completar la instalación:

  shell

  cd ios
  pod install
  cd ..

Una vez instaladas y configuradas las dependencias, puedes proceder a configurar tu proyecto para usar React Navigation.

Al usar React Navigation, configuras navegadores en tu aplicación. Los navegadores manejan la transición entre pantallas y proporcionan elementos de UI como encabezados, barras de pestañas, etc.

Ahora estás listo para compilar y ejecutar tu aplicación en el dispositivo/simulador.

Uso

Ahora puedes crear una aplicación con una pantalla de inicio y una pantalla de perfil:

tsx

import * as React from 'react';
import {createStaticNavigation} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';

const RootStack = createNativeStackNavigator({
  screens: {
    Home: {
      screen: HomeScreen,
      options: {title: 'Welcome'},
    },
    Profile: {
      screen: ProfileScreen,
    },
  },
});

const Navigation = createStaticNavigation(RootStack);

export default function App() {
  return <Navigation />;
}

En este ejemplo, RootStack es un navegador con 2 pantallas (Home y Profile), definidas en la propiedad screens de createNativeStackNavigator. De igual modo, puedes definir tantas pantallas como desees.

Puedes especificar opciones como el título de pantalla en la propiedad options de cada pantalla. Cada definición de pantalla también necesita una propiedad screen que sea un componente de React u otro navegador.

Dentro de cada componente de pantalla, puedes usar el hook useNavigation para obtener el objeto navigation, que tiene varios métodos para vincular a otras pantallas. Por ejemplo, puedes usar navigation.navigate para ir a la pantalla Profile:

tsx

import {useNavigation} from '@react-navigation/native';

function HomeScreen() {
  const navigation = useNavigation();

  return (
    <Button
      title="Go to Jane's profile"
      onPress={() =>
        navigation.navigate('Profile', {name: 'Jane'})
      }
    />
  );
}

function ProfileScreen({route}) {
  return <Text>This is {route.params.name}'s profile</Text>;
}

Este navegador native-stack usa APIs nativas: UINavigationController en iOS y Fragment en Android, por lo que la navegación construida con createNativeStackNavigator se comportará igual y tendrá características de rendimiento similares a las aplicaciones construidas de forma nativa sobre estas APIs.

React Navigation también tiene paquetes para diferentes tipos de navegadores como pestañas y cajones. Puedes usarlos para implementar varios patrones en tu aplicación.

Para una introducción completa a React Navigation, sigue la Guía de inicio de React Navigation.