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

A menudo, al crear una aplicación React Native, la compondrá desde diferentes pantallas como Inicio de sesión, Inicio y Acerca de. Luego deberá implementar un mecanismo de navegación para que sus usuarios puedan navegar por 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 sus pantallas al navegador de pila y conectar las pantallas desde dentro de cada uno de sus componentes.

Antes de que empieces

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

• Node.js v10 o superior
• código x o Estudio Android (configurado para ejecutar el emulador)
• Reaccionar CLI nativo

Para obtener instrucciones paso a paso sobre cómo configurar su entorno de desarrollo React Native, puede leer el

Reaccionar nativo oficial documentación de instalación.

Antes de comenzar a ver 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 Hogar, que es la primera pantalla que se muestra al abrir la aplicación.

Si tuviera que navegar a la Acerca de pantalla de la Hogar pantalla, la aplicación presionaría Acerca de en la pila, por lo que se sienta en la parte superior de Hogar. Del mismo modo, la aplicación empuja cada nueva pantalla a la que navega en la pila.

Ahora, si desea volver a la pantalla anterior, la aplicación saca su pantalla actual de la pila y le muestra la que está debajo. 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, ahora es el momento de configurarlo en una aplicación React Native.

1. Instalar React Navigation para aplicaciones nativas

Para comenzar, instale el Reaccionar paquete de navegación para aplicaciones nativas en su proyecto React Native ejecutando este comando en una terminal:

npm yo @reaccionar-navegación/nativo

El paquete que acaba de instalar requiere Reaccionar pila nativa y Reaccionar pantallas nativas para funcionar correctamente. Para instalar RN Stack, ejecute:

npm yo @reaccionar-navegación/nativo-pila

Para instalar el segundo, ejecuta esto:

npm reacciono-nativo-pantallas

Ahora tiene todo lo que necesita para comenzar a crear 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 Native

Para este ejemplo, crearemos solo dos pantallas: la pantalla de inicio y la pantalla Acerca de.

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

Qué agregar a su archivo HomeScreen.js

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

importar * como Reaccionar de'reaccionar';
importar { Texto, Vista, Hoja de estilo, Opacidad táctil } de'reaccionar-nativo';
importar { estado de uso } de'reaccionar'

A continuación, cree el componente funcional HomeScreen y acceda al objeto de navegación utilizando la deconstrucción de objetos (según Reaccionar mejores prácticas), luego devuelva un título y un botón para navegar a la pantalla Acerca de:

exportarpor defectofunciónPantalla de inicio({navegación}) { 
devolver ( 
<Vistaestilo={estilos.contenedor}>
<Textoestilo={estilos.párrafo}> Pantalla de inicio Texto>
 titulo="Ir a Acerca de"
 onPress={() => navegación.navegar('Acerca de la pantalla')} 
 /> 
Vista>
 );
}

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

exportarpor defectofunciónPantalla de inicio({navegación}) { 
constante datos = { Nombre del Sitio Web: "Tecnología de John" }
devolver ( 
<Vistaestilo={estilos.contenedor}>
// El texto va aquí 
 titulo="Ir a Acerca de"
 onPress={() => navegación.navegar('Acerca de la pantalla', datos)} 
 /> 
Vista>
 );
}

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

Qué agregar a su archivo AboutScreen.js

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

importar * como Reaccionar de'reaccionar';
importar { Texto, Vista, Hoja de estilo, Botón } de'reaccionar-nativo';

A continuación, cree el Acerca de la pantalla componente funcional que toma datos del ruta.parámetros propiedad y devuelve los datos en la interfaz de usuario:

exportarpor defectofunciónAcerca de la pantalla({ruta}) { 
dejar dataObj = ruta.parámetros
devolver ( 
<Vistaestilo={estilos.contenedor}>
<Textoestilo={estilos.párrafo}>
 Este es la pantalla Acerca de de {dataObj.websiteName} 
Texto>
Vista>
 );
}

Si recuerda, especificamos una sola propiedad en el objeto de datos llamado Nombre del Sitio Web, que ahora renderizamos dentro del 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. Conexión de las pantallas con el Stack Navigator

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

importar * como Reaccionar de'reaccionar';
importar Pantalla de inicio de'./pantallas/Pantalla de inicio'
importar Acerca de la pantalla de'./pantallas/AboutScreen'
importar {Contenedor de navegación} de"@react-navegación/nativo"
importar { createNativeStackNavigator } de"@react-navigation/native-stack"

En las líneas dos y tres, importamos las dos pantallas que acabamos de crear. Luego, importamos NavegaciónContenedor

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

A continuación, llame createNativeStackNavigator para recuperar la pila:

constante Pila = createNativeStackNavigator()

Esto nos permite "apilar" las pantallas entre las que desea hacer la transición en su aplicación.

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

exportarpor defectofunciónaplicación() { 
devolver ( 
<NavegaciónContenedor>
<Pila. Navegador>
<Pila. Pantallanombre="Pantalla de inicio"componente = {Pantalla de inicio} />
<Pila. Pantallanombre="Acerca de la pantalla"componente = {Acerca de la pantalla} />
Pila. Navegador>
NavegaciónContenedor>
 );
}

Este código coloca la pantalla HomeScreen en la parte superior de la pila, lo que significa que la aplicación primero representará el componente Home cuando termine de cargarse.

Ahora todo está listo. Puede probar la aplicación haciendo clic en el Ir a Acerca de botón en la interfaz de usuario de inicio. Esto debería redirigirte a Acerca de, y 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 configuraciones adicionales (además de las bibliotecas requeridas que instaló), y también puede conectarse diferentes tipos de muros de pago (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.