Cómo navegar entre pantallas en una aplicación React nativa

A menudo, cuando crea una aplicación React Native, la compone desde diferentes pantallas como Inicio de sesión, Inicio y Acerca de. Por lo tanto, deberá implementar un mecanismo de navegación para que sus usuarios puedan navegar a través de la aplicación y acceder a sus pantallas individuales en el orden correcto.

El propósito de este tutorial es guiarlo a través del proceso de configuración de un sistema de navegación en su aplicación React Native. Esto incluye instalar la biblioteca, agregar las pantallas a la pila del navegador y vincular las pantallas dentro de cada uno de los componentes.

Antes de empezar

Para seguir este tutorial en su computadora local, debe tener instalado lo siguiente:

Para obtener instrucciones detalladas sobre cómo configurar su entorno de desarrollo de React Native, puede leer la documentación de instalación oficial de React Native.

Antes de comenzar a investigar cómo implementar la navegación en nuestra aplicación React Native, comprendamos cómo funciona el mecanismo de navegación de la pila en React Native.

Comprender cómo funciona la navegación de pila

Imagine que su aplicación React Native es una pila. Inicialmente, en esa pila, tienes Hogarque es la primera pantalla que se muestra al abrir la aplicación.

Si tuviera que navegar a la De pantalla de Hogar pantalla, la aplicación presionaría De en la pila, por lo que está encima de Hogar. De manera similar, la aplicación empuja cada nueva pantalla en la que navega a la pila.

Ahora, si desea volver a la pantalla anterior, la aplicación saca la pantalla actual de la pila y le muestra la siguiente. Este comportamiento es similar a lo que sucede cuando hace clic en el icono “atrás” en su navegador web.

Con una comprensión clara del mecanismo de navegación de la pila, es hora de configurarlo en una aplicación React Native.

1. Instala React Navigation para aplicaciones nativas

Para comenzar, instale el paquete React Navigation para aplicaciones nativas en su proyecto React Native ejecutando este comando en una terminal:

 npm i @react-navigation/native 

El paquete recién instalado requiere React Native Stack y React Native Screens para funcionar correctamente. Para instalar RN Stack, ejecute:

 npm i @react-navigation/native-stack 

Para instalar el segundo, ejecuta esto:

 npm i react-native-screens 

Ahora tiene todo lo que necesita para comenzar a construir el mecanismo de navegación en su aplicación. El siguiente paso es configurar las pantallas.

2. Configure la pantalla en su aplicación React nativa

Para este ejemplo, crearemos solo dos pantallas: la pantalla de inicio y la pantalla de información.

Crear una carpeta llamada pantallas dentro del directorio raíz de la aplicación. A continuación, cree dos archivos llamados HomeScreen.js y AboutScreen.js dentro del directorio pantallas.

Qué agregar al archivo HomeScreen.js

Abra el archivo HomeScreen.js y comience importando lo siguiente:

 import * as React from 'react';
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import { useState } from 'react'
 

A continuación, cree el componente funcional HomeScreen y acceda al objeto de navegación usando la deconstrucción de objetos (de acuerdo con las mejores prácticas de React), luego devuelva un título y un botón para navegar a la pantalla de información:

 export default function HomeScreen({navigation}) { 
  return ( 
    <View style={styles.container}> 
      <Text style={styles.paragraph}> Home Screen </Text> 
      <Button 
        title="Go to About" 
        onPress={() => navigation.navigate('AboutScreen')} 
      /> 
    </View> 
  );
}
 

Aquí le estamos diciendo a React Native que navegue hasta De cuando un usuario presiona el botón. En este caso, no estamos pasando ningún dato a la pantalla. Pero supongamos que queremos pasar datos a la función; así es como lo harías:

 export default function HomeScreen({navigation}) { 
  const data = { websiteName: "John's Tech" }
  return ( 
    <View style={styles.container}> 
      
      <Button 
        title="Go to About" 
        onPress={() => navigation.navigate('AboutScreen', data)} 
      /> 
    </View> 
  );
}
 

Ahora cuando presionas el botón, este código pasa los datos a la siguiente pantalla, De. Dentro de Acerca de Screen.js archivo, puede acceder a los datos desde la ruta y verlos en la interfaz de usuario.

Qué agregar al archivo AboutScreen.js

Abra el archivo AboutScreen.js y comience importando las siguientes dependencias:

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

Luego crea el archivo Acerca de la pantalla componente funcional que recibe datos de ruta.parámetros propiedad y devolver los datos a la interfaz de usuario:

 export default function AboutScreen({route}) { 
  let dataObj = route.params
  return ( 
    <View style={styles.container}> 
      <Text style={styles.paragraph}> 
        This is the About Screen of {dataObj.websiteName} 
      </Text> 
    </View> 
  );
}
 

Si recuerda, especificamos una sola propiedad en el objeto de datos nombrado Nombre del Sitio Webque ahora rendimos dentro componente. Puede agregar tantas propiedades como desee en el objeto y acceder a ellas dentro del componente de pantallas de destino.

El siguiente paso es configurar nuestro navegador de pila con las dos pantallas.

3. Vinculación de pantallas con Stack Navigator

Dentro de App.js, comience importando las siguientes dependencias:

 import * as React from 'react';
import HomeScreen from './screens/HomeScreen'
import AboutScreen from './screens/AboutScreen'
import { NavigationContainer } from "@react-navigation/native"
import { createNativeStackNavigator } from "@react-navigation/native-stack"
 

En las líneas dos y tres, importamos las dos pantallas que acabamos de crear. Luego, importamos Contenedor de navegación

de @reaccionar-navegación/nativo Y createNativeStackNavigator de @reaccionar-navegación/pila nativa para ayudarnos a conectar las pantallas.

Vamos, llama createNativeStackNavigator para obtener la pila:

 const Stack = createNativeStackNavigator()
 

Esto nos permite “apilar” las pantallas entre las que desea cambiar en su aplicación.

Cree la función del componente de la aplicación y devuelva ambas pantallas en el archivo Como se muestra abajo. Asegúrese de envolverlo en el o no funcionará:

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

Este código coloca la pantalla de inicio en la parte superior de la pila, lo que significa que la aplicación primero representará el componente de inicio después de que termine de cargarse.

Ahora está todo listo. Puede probar la aplicación haciendo clic en Ir a Acerca de en la interfaz de usuario de Inicio. Esto debería redirigirte a Dey encontrarás el Nombre del Sitio Web propiedad que se muestra en la interfaz de usuario:

Lo mejor de usar React Navigation for Native es que es muy fácil de configurar y usar. No requiere ninguna configuración adicional (más allá de las bibliotecas requeridas que haya instalado) y también puede conectar diferentes tipos de Paywalls (si tiene la intención de crear una aplicación basada en suscripción).

Más información sobre React Native

React Native es un marco multiplataforma para crear aplicaciones que se ejecutan en dispositivos Android e iOS. Hay mucho que aprender sobre React Native y si es nuevo en el uso del marco, debe comenzar aprendiendo los conceptos básicos.