Cómo utilizar el enrutamiento con React Navigation en React Native

Introducción

React Navigation es una biblioteca popular para enrutamiento y navegación en una aplicación React Native.

Esta biblioteca ayuda a resolver el problema de navegar entre múltiples pantallas y compartir datos entre ellas.

Al finalizar este tutorial, tendrás una red social rudimentaria. Mostrará la cantidad de conexiones que tiene un usuario y brindará una forma de conectarse con amigos adicionales. Utilizarás esta aplicación de muestra para explorar cómo navegar por las pantallas de aplicaciones móviles usando react-navigation.

Prerrequisitos

Para completar este tutorial, necesitarás:

• Un entorno de desarrollo local para Node.js. Siga el tutorial Cómo instalar Node.js y crear un entorno de desarrollo local.
• Puede resultar beneficioso estar familiarizado con la configuración de su entorno para crear un nuevo proyecto React Native y utilizar los simuladores de iOS o Android.

Nota: si ya ha trabajado con react-navigationesta versión en el pasado, es posible que encuentre algunas diferencias. Puede consultar la documentación para obtener guías sobre cómo migrar desde la versión 3.x y desde la versión 4.x.

Este tutorial fue verificado con Node v14.7.0, npmv6.14.7, reactv16.13.1, react-nativev0.63.2, @react-navigation/nativev5.7.3 y @react-navigation/stackv5.9.0.

Paso 1: creación de una nueva aplicación React Native

Primero, crea una nueva aplicación React Native ingresando el siguiente comando en tu terminal:

npx react-native init MySocialNetwork --version 0.63.2

Luego, navegue hasta el nuevo directorio:

cd MySocialNetwork

Y inicia la aplicación para iOS:

npm run ios

Alternativamente, para Android:

npm run android

Nota: Si experimenta algún problema, es posible que deba consultar la solución de problemas de la CLI de React Native.

Esto creará un esqueleto de proyecto para ti. No se parece mucho a una red social en este momento. Vamos a solucionarlo.

Abre App.js:

nano App.js

Reemplace el contenido de App.jscon el siguiente código para mostrar un mensaje de bienvenida:

Aplicación.js

import React from 'react';import { StyleSheet, Text, View } from 'react-native';class App extends React.Component {  render() {    return (      View style={styles.container}        TextWelcome to MySocialNetwork!/Text      /View    );  }}const styles = StyleSheet.create({  container: {    flex: 1,    backgroundColor: '#fff',    alignItems: 'center',    justifyContent: 'center',  },});export default App;

Guarda el archivo. Ahora, cuando ejecutes la aplicación, aparecerá en tu simulador un mensaje que te dirá ¡Bienvenido a MySocialNetwork!

En el siguiente paso, agregará más pantallas a su aplicación.

Paso 2 — Crear un HomeScreenyFriendsScreen

Actualmente, tiene una sola pantalla que muestra un mensaje de bienvenida. En este paso, creará las dos pantallas para su aplicación: HomeScreeny FriendsScreen.

HomeScreen

Tu aplicación necesitará un HomeScreen. El HomeScreenmostrará la cantidad de amigos que ya están en tu red.

Tome el código App.jsy agréguelo a un nuevo archivo llamado HomeScreen.js:

cp App.js HomeScreen.js

Abierto HomeScreen.js:

nano HomeScreen.js

Modificar HomeScreen.jspara utilizar HomeScreenen lugar de App:

Pantalla de inicio.js

import React from 'react';import { StyleSheet, Text, View } from 'react-native';class HomeScreen extends React.Component {  render() {    return (      View style={styles.container}        TextYou have (undefined) friends./Text      /View    );  }}// ...export default HomeScreen;

Este código generará un mensaje de marcador de posición Tienes (indefinidos) amigos. Proporcionarás un valor más adelante.

FriendsScreen

Tu aplicación también necesitará un FriendsScreen. En el FriendsScreenpodrás agregar nuevos amigos.

Tome el código App.jsy agréguelo a un nuevo archivo llamado FriendsScreen.js:

cp App.js FriendsScreen.js

Abierto FriendsScreen.js:

nano FriendsScreen.js

Modificar FriendsScreen.jspara utilizar FriendsScreenen lugar de App:

Pantalla de amigos.js

import React from 'react';import { StyleSheet, Text, View } from 'react-native';class FriendsScreen extends React.Component {  render() {    return (      View style={styles.container}        TextAdd friends here!/Text      /View    );  }}// ...export default FriendsScreen;

Este código producirá un mensaje ¡Agrega amigos aquí!

En este punto, tienes un HomeScreeny FriendsScreen. Sin embargo, no hay forma de navegar entre ellos. Desarrollarás esta funcionalidad en el siguiente paso.

Paso 3: Uso StackNavigatorcon React Navigation

Para navegar entre pantallas, utilizará un StackNavigator. Un . StackNavigatorfunciona exactamente como una pila de llamadas. Cada pantalla a la que navega se coloca en la parte superior de la pila. Cada vez que presiona el botón Atrás, las pantallas se desprenden de la parte superior de la pila.

Primero, instale @react-navigation/native:

npm install @react-navigation/native@5.7.3

Luego, instala @react-navigation/stacky sus dependencias pares:

npm install @react-navigation/stack@5.9.0 @react-native-community/masked-view@0.1.10 react-native-screens@2.10.1 react-native-safe-area-context@3.1.4 react-native-gesture-handler@1.7.0

Nota: Si está desarrollando para iOS, es posible que deba navegar hasta el iosdirectorio y ejecutar pod install.

A continuación, revise App.js:

nano App.js

Agregar NavigationContainery createStackNavigatora App.js:

Aplicación.js

import 'react-native-gesture-handler';import React from 'react';import { StyleSheet } from 'react-native';import { NavigationContainer } from '@react-navigation/native';import { createStackNavigator } from '@react-navigation/stack';const Stack = createStackNavigator();

Luego, reemplace el contenido de render:

Aplicación.js

// ...class App extends React.Component {  render() {    return (      NavigationContainer        Stack.Navigator        /Stack.Navigator      /NavigationContainer    );  }}// ...

Anidado dentro Stack.Navigator, agregue lo siguiente HomeScreen:

Aplicación.js

import 'react-native-gesture-handler';import React from 'react';import { StyleSheet } from 'react-native';import { NavigationContainer } from '@react-navigation/native';import { createStackNavigator } from '@react-navigation/stack';import HomeScreen from './HomeScreen';const Stack = createStackNavigator();class App extends React.Component {  render() {    return (      NavigationContainer        Stack.Navigator          Stack.Screen            name="Home"            component={HomeScreen}          /        /Stack.Navigator      /NavigationContainer    );  }}// ...

Este código crea una pila muy pequeña para su navegador con solo una pantalla: HomeScreen.

Anidado dentro Stack.Navigator, agregue lo siguiente FriendsScreen:

Aplicación.js

import 'react-native-gesture-handler';import React from 'react';import { StyleSheet } from 'react-native';import { NavigationContainer } from '@react-navigation/native';import { createStackNavigator } from '@react-navigation/stack';import HomeScreen from './HomeScreen';import FriendsScreen from './FriendsScreen';const Stack = createStackNavigator();class App extends React.Component {  render() {    return (      NavigationContainer        Stack.Navigator          Stack.Screen            name="Home"            component={HomeScreen}          /          Stack.Screen            name="Friends"            component={FriendsScreen}          /        /Stack.Navigator      /NavigationContainer    );  }}// ...

Este código agrega FriendsScreenal navegador.

Nota: Esto difiere de cómo createStackNavigatorse usaba en versiones anteriores de React Navigation.

Ahora, el navegador es consciente de sus dos pantallas.

Agregar botones a HomeScreenyFriendsScreen

Por último, agrega botones que te lleven de una pantalla a otra.

En HomeScreen.js, agregue el siguiente código:

Pantalla de inicio.js

import React from 'react';import { StyleSheet, Text, View, Button } from 'react-native';class HomeScreen extends React.Component {  render() {    return (      View style={styles.container}        TextYou have (undefined) friends./Text        Button          title="Add some friends"          onPress={() =            this.props.navigation.navigate('Friends')          }        /      /View    );  }}// ...

En FriendsScreen.js, agregue el siguiente código:

Pantalla de amigos.js

import React from 'react';import { StyleSheet, Text, View, Button } from 'react-native';class FriendsScreen extends React.Component {  render() {    return (      View style={styles.container}        TextAdd friends here!/Text        Button          title="Back to home"          onPress={() =            this.props.navigation.navigate('Home')          }        /      /View    );  }}// ...

Hablemos de this.props.navigation. Mientras tu pantalla esté incluida en StackNavigator, heredará automáticamente muchas propiedades útiles del navigationobjeto. En este caso, solías navigatemoverte a una página diferente.

Si abres tu simulador ahora, podrás navegar entre HomeScreeny FriendsScreen.

Paso 4: Uso Contextpara pasar datos a otras pantallas

En este paso, creará una matriz de posibles amigos ( Alice, Bob, y Sammy) y una matriz vacía de amigos actuales. También creará una función para que el usuario agregue posibles amigos a sus amigos actuales.

Abierto App.js:

nano App.js

Añade possibleFriendsy currentFriendsal estado del componente:

Aplicación.js

// ...class App extends React.Component {  constructor(props) {    super(props)    this.state = {      possibleFriends: [        'Alice',        'Bob',        'Sammy',      ],      currentFriends: [],    }  }  // ...}// ...

A continuación, agregue una función para mover un posible amigo a la lista de amigos actuales:

Aplicación.js

// ...class App extends React.Component {  constructor(props) {    super(props)    this.state = {      possibleFriends: [        'Alice',        'Bob',        'Sammy',      ],      currentFriends: [],    }  }  addFriend = (index) = {    const {      currentFriends,      possibleFriends,    } = this.state    // Pull friend out of possibleFriends    const addedFriend = possibleFriends.splice(index, 1)    // And put friend in currentFriends    currentFriends.push(addedFriend)    // Finally, update the app state    this.setState({      currentFriends,      possibleFriends,    })  }  // ...}// ...

En este punto, has terminado de crear la funcionalidad para agregar amigos.

Añadiendo FriendsContextaApp

Ahora puedes agregar amigos en App.js, pero deberás agregarlos a FriendsScreen.jsy hacer que se muestren en HomeScreen.js. Dado que este proyecto está creado con React, puedes inyectar esta funcionalidad en tus pantallas con contexto.

Nota: En versiones anteriores de React Navigation, era posible usar screenPropsReact Context para compartir datos entre pantallas. En la versión actual de React Navigation, se recomienda usar React Context para compartir datos entre pantallas.

Para evitar una referencia circular, necesitarás un nuevo FriendsContextarchivo:

nano FriendsContext.js

Exportar FriendsContext:

AmigosContexto

import React from 'react';export const FriendsContext = React.createContext();

Abierto App.js:

nano App.js

Añade el FriendsContext:

Aplicación.js

import 'react-native-gesture-handler';import React from 'react';import { StyleSheet } from 'react-native';import { NavigationContainer } from '@react-navigation/native';import { createStackNavigator } from '@react-navigation/stack';import { FriendsContext } from './FriendsContext';import Home from './Home';import Friends from './Friends';const Stack = createStackNavigator();class App extends React.Component {  // ...  render() {    return (      FriendsContext.Provider        NavigationContainer          Stack.Navigator            Stack.Screen              name="Home"              component={Home}            /            Stack.Screen              name="Friends"              component={Friends}            /          /Stack.Navigator        /NavigationContainer      /FriendsContext.Provider    );  }}// ...

Este código se establece FriendsContextcomo un nuevo Contextobjeto y lo envuelve NavigationContaineren un Context.Providercomponente para que todos los hijos en el árbol de componentes puedan suscribirse a los cambios de contexto.

Dado que ya no utiliza Viewo Text, es posible eliminar esas importaciones de react-native.

Será necesario que proporciones un valuedocumento para que los consumidores puedan acceder a los datos:

Aplicación.js

// ...class App extends React.Component {  // ...  render() {    return (      FriendsContext.Provider        value={          {            currentFriends: this.state.currentFriends,            possibleFriends: this.state.possibleFriends,            addFriend: this.addFriend          }        }              NavigationContainer          Stack.Navigator            Stack.Screen              name="Home"              component={Home}            /            Stack.Screen              name="Friends"              component={Friends}            /          /Stack.Navigator        /NavigationContainer      /FriendsContext.Provider    );  }}// ...

Esto permitirá que HomeScreeny FriendsScreenhagan referencia a cualquier cambio de contexto en currentFriendsy possibleFriends.

Ahora puedes trabajar en referenciar el contexto en tus pantallas.

Añadiendo FriendsContextaHomeScreen

En este paso, configurará la aplicación para que muestre el número actual de amigos.

Abierto HomeScreen.js:

nano HomeScreen.js

Y añade el FriendsContext:

Pantalla de inicio.js

import React from 'react';import { StyleSheet, Text, View, Button } from 'react-native';import { FriendsContext } from './FriendsContext';class HomeScreen extends React.Component {  // ...}HomeScreen.contextType = FriendsContext;// ...

Este código establece un Class.contextType. Ahora puedes acceder al contexto en tus pantallas.

Por ejemplo, vamos a hacer que tu HomeScreenpantalla muestre cuántos currentFriendstienes:

Pantalla de inicio.js

import React from 'react';import { StyleSheet, Text, View, Button } from 'react-native';import { FriendsContext } from './FriendsContext';class Home extends React.Component {  render() {    return (      View style={styles.container}        TextYou have { this.context.currentFriends.length } friends!/Text        Button                   onPress={() =            this.props.navigation.navigate('Friends')          }        /      /View    );  }}HomeScreen.contextType = FriendsContext;// ...

Si abres tu aplicación nuevamente en el simulador y ves el HomeScreen, verás el mensaje: ¡Tienes 0 amigos! .

Añadiendo FriendsContextaFriendsScreen

En este paso, configurará la aplicación para mostrar los posibles amigos y proporcionar botones para agregarlos a los amigos actuales.

A continuación, abra FriendsScreen.js:

nano FriendsScreen.js

Y añade el FriendsContext:

Pantalla de amigos.js

import React from 'react';import { StyleSheet, Text, View, Button } from 'react-native';import { FriendsContext } from './FriendsContext';class FriendsScreen extends React.Component {  // ...}FriendsScreen.contextType = FriendsContext;// ...

Este código establece un Class.contextType.

Ahora, crea un botón para agregar amigos en FriendsScreen.js:

Pantalla de amigos.js

import React from 'react';import { StyleSheet, Text, View, Button } from 'react-native';import { FriendsContext } from './FriendsContext';class Friends extends React.Component {  render() {    return (      View style={styles.container}        TextAdd friends here!/Text        {          this.context.possibleFriends.map((friend, index) = (            Button              key={ friend }              title={ `Add ${ friend }` }              onPress={() =                this.context.addFriend(index)              }            /          ))        }        Button                   onPress={() =            this.props.navigation.navigate('Home')          }        /      /View    );  }}FriendsScreen.contextType = FriendsContext;// ...

Si abres tu aplicación nuevamente en el simulador y ves el FriendsScreen, verás una lista de amigos para agregar.

Si visitas el sitio FriendsScreeny haces clic en el botón para agregar amigos, verás que la lista de amigos possibleFriendsdisminuye. Si visitas el sitio HomeScreen, verás que la cantidad de amigos aumenta.

Ahora puedes navegar entre pantallas y compartir datos entre ellas.

Conclusión

En este tutorial, creaste una aplicación React Native de muestra con varias pantallas. Con React Navigation, diseñaste una forma de navegar entre pantallas. Con React Context, desarrollaste una forma de compartir datos entre pantallas.

El código fuente completo de este tutorial está disponible en GitHub.

Si desea profundizar en React Navigation, consulte su documentación.

React Navigation no es la única solución de navegación y enrutamiento. También existen React Native Navigation, React Native Router Flux y React Router Native.

Si desea obtener más información sobre React, eche un vistazo a nuestra serie Cómo codificar en React.js o consulte nuestra página de temas de React para ver ejercicios y proyectos de programación.