DigitalOcean

Tutorial

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

Published on December 2, 2020
authorauthor

Zeb Girouard and Bradley Kouchi

Español
Cómo usar el enrutamiento con React Navigation en React Native

Introducción

React Navigation es una biblioteca popular para realizar 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 final de este tutorial, tendrá una red social rudimentaria. Mostrará el número de conexiones que tiene un usuario y proporcionará una forma de conectarse con amigos adicionales. Podrá usar esta aplicación de muestra para explorar cómo navegar en pantallas de aplicaciones móviles usando react-navigation.

Requisitos previos

Para completar este tutorial, necesitará lo siguiente:

Nota: Si trabajó con react navigation en el pasado, es posible que encuentre algunas diferencias. Puede consultar la documentación para ver guías sobre la migración desde 3.x y la migración desde 4.x.

Este tutorial se verificó con Node v14.7.0, npm v6.14.7, react v16.13.1, react-native v0.63.2, @react-navigation/native v5.7.3 y @react-navigation/stack v5.9.0.

Paso 1: Crear una nueva aplicación React Native

Primero, cree una nueva aplicación React Native introduciendo el siguiente comando en su terminal:

  1. npx react-native init MySocialNetwork --version 0.63.2

Luego, diríjase al nuevo directorio:

  1. cd MySocialNetwork

E inicie la aplicación para iOS:

  1. npm run ios

De forma alternativa para Android:

  1. npm run android

Nota: Si tiene algún problema, le recomendamos consultar el artículo de resolución de problemas de la CLI de React Native.

Con esto, se creará un proyecto de esqueleto. No se parece mucho a una red social en este momento. Vamos a arreglarlo.

Abra App.js:

  1. nano App.js

Sustituya el contenido de App.js con el siguiente código para mostrar un mensaje de bienvenida:

App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Welcome to MySocialNetwork!</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default App;

Guarde el archivo. Ahora, cuando ejecute la aplicación, aparecerá el mensaje ¡Bienvenido a MySocialNetwork! en su simulador.

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

Paso 2: Crear una pantalla HomeScreen y una FriendsScreen

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

HomeScreen

Su aplicación necesitará una pantalla HomeScreen. La pantalla HomeScreen mostrará el número de amigos que ya están en su red.

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

  1. cp App.js HomeScreen.js

Abra HomeScreen.js:

  1. nano HomeScreen.js

Modifique HomeScreen.js para usar HomeScreen en vez de laApp:

HomeScreen.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>You have (undefined) friends.</Text>
      </View>
    );
  }
}

// ...

export default HomeScreen;

Este código producirá un mensaje de marcador de posición Tiene amigos (sin definir). Deberá proporcionar un valor más adelante.

FriendsScreen

Su aplicación también necesitará una pantalla FriendsScreen. En la pantalla FriendsScreen, podrá agregar nuevos amigos.

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

  1. cp App.js FriendsScreen.js

Abra FriendsScreen.js:

  1. nano FriendsScreen.js

Modifique FriendsScreen.js para usar FriendsScreen en vez de la aplicación:

FriendsScreen.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

class FriendsScreen extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Add friends here!</Text>
      </View>
    );
  }
}

// ...

export default FriendsScreen;

Este código producirá un mensaje Agregar amigos aquí (¡funcionó!).

En este momento, tiene una pantalla HomeScreen y una FriendsScreen. Sin embargo, no hay forma de navegar entre ellas. Creará esta funcionalidad en el siguiente paso.

Paso 3: Usar StackNavigator con React Navigation

Para navegar entre pantallas, usará un StackNavigator. El StackNavigator funciona exactamente como una pila de llamadas. Cada pantalla a la que navega se inserta en la parte superior de la pila. Cada vez que presione el botón atrás, las pantallas aparecerán en la parte superior de la pila.

Primero, instale @react-navigation/native:

  1. npm install @react-navigation/native@5.7.3

Luego, instale @react-navigation/stack y sus dependencias del mismo nivel:

  1. 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 iOS, es posible que necesite ir al directorio de ios y ejecutar pod install.

A continuación, vuelva a visitar App.js:

  1. nano App.js

Agregue NavigationContainer y createStackNavigator a App.js:

App.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, sustituya el contenido de render:

App.js
// ...

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

// ...

Anidada en <Stack.Navigator>, agregue la pantalla HomeScreen:

App.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 una sola pantalla: HomeScreen.

Anidada en <Stack.Navigator>, agregue la pantalla FriendsScreen:

App.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 la pantalla FriendsScreen al navegador.

Nota: Esta manera de utilizar createStackNavigator es distinta a la que se usaba en versiones anteriores de React Navigation.

Ahora, el navegador sabe sobre sus dos pantallas.

Cómo agregar botones a HomeScreen y FriendsScreen

Finalmente, agregue botones para poder navegar entre las dos pantallas.

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

HomeScreen.js
import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>You have (undefined) friends.</Text>

        <Button
          title="Add some friends"
          onPress={() =>
            this.props.navigation.navigate('Friends')
          }
        />
      </View>
    );
  }
}

// ...

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

FriendsScreen.js
import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';

class FriendsScreen extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Add friends here!</Text>

        <Button
          title="Back to home"
          onPress={() =>
            this.props.navigation.navigate('Home')
          }
        />
      </View>
    );
  }
}

// ...

Vamos a hablar de this.props.navigation. Mientras su pantalla esté incluida en el StackNavigator, hereda automáticamente muchas propiedades del objeto navigation. En este caso, se utilizó navigate para pasar a una página diferente.

HomeScreen y FriendsScreen

Si abre el simulador ahora, puede navegar entre la pantalla HomeScreen y FriendsScreen.

Paso 4: Usar el contexto para 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á funcionalidad para que el usuario agregue posibles amigos a sus amigos actuales.

Abra App.js:

  1. nano App.js

Agregue possibleFriends y currentFriends al estado del componente:

App.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:

App.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 momento, ha terminó de crear la funcionalidad para agregar amigos.

Cómo agregar FriendsContext a la aplicación

Ahora puede agregar amigos en App.js, pero deberá agregarlos a FriendsScreen.js y hacer que se muestren en HomeScreen.js. En vista de que este proyecto se crea con React, puede introducir esta funcionalidad en las pantallas con contexto.

Nota: En versiones anteriores de React Navigation, se pudo usar screenProps 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á un nuevo archivo FriendsContext:

  1. nano FriendsContext.js

Exporte FriendsContext:

FriendsContext
import React from 'react';

export const FriendsContext = React.createContext();

Abra App.js:

  1. nano App.js

Agregue FriendsContext:

App.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 establece FriendsContext como un nuevo objeto Context y ajusta NavigationContainer en un componente Context.Provider para que cualquier elemento secundario en el árbol de componentes pueda suscribirse a cambios de contexto.

En vista de que ya no está usando View o Text, es posible eliminar esas importaciones desde react-native.

Deberá proporcionar un valor para hacer que los consumidores puedan acceder a los datos:

App.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 HomeScreen y FriendsScreen hagan referencia sobre cualquier cambio de contexto a currentFriends y possibleFriends.

Ahora puede trabajar en cómo hacer referencia al contexto en las pantallas.

Cómo agregar FriendsContext a HomeScreen

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

Abra HomeScreen.js:

  1. nano HomeScreen.js

Y agregue FriendsContext:

HomeScreen.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 puede acceder al contexto en las pantallas.

Por ejemplo, vamos a hacer que su pantalla HomeScreen muestre cuántos currentFriends tiene:

HomeScreen.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}>
        <Text>You have { this.context.currentFriends.length } friends!</Text>

        <Button
          title="Add some friends"
          onPress={() =>
            this.props.navigation.navigate('Friends')
          }
        />
      </View>
    );
  }
}
HomeScreen.contextType = FriendsContext;

// ...

Si vuelve a abrir su aplicación en el simulador y visualiza HomeScreen, verá el mensaje: Tiene 0 amigos.

Cómo agregar FriendsContext a FriendsScreen

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

A continuación, abra FriendsScreen.js:

  1. nano FriendsScreen.js

Y agregue FriendsContext:

FriendsScreen.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, cree un botón para agregar amigos en FriendsScreen.js:

FriendsScreen.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}>
        <Text>Add friends here!</Text>

        {
          this.context.possibleFriends.map((friend, index) => (
            <Button
              key={ friend }
              title={ `Add ${ friend }` }
              onPress={() =>
                this.context.addFriend(index)
              }
            />
          ))
        }

        <Button
          title="Back to home"
          onPress={() =>
            this.props.navigation.navigate('Home')
          }
        />
      </View>
    );
  }
}
FriendsScreen.contextType = FriendsContext;

// ...

Si vuelve a abrir su aplicación en el simulador y visualizar FriendsScreen, verá una lista de amigos para agregar.

HomeScreen con 0 currentFriends y FriendScreen con 3 possibleFriends

Si visita FriendsScreen y hace clic en el botón para agregar amigos, verá que la lista de possibleFriends se reduce. Si visita HomeScreen, verá que el número de amigos aumenta.

Ahora, puede navegar entre pantallas y compartir datos entre ellas.

Conclusión

En este tutorial, creado una aplicación React Native de muestra con múltiples pantallas. Con React Navigation, diseñó una forma de navegar entre pantallas. Con React Context, desarrolló una forma de compartir datos entre pantallas.

El código fuente completo para 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 enrutamiento y navegación. También está React Native Navigation, React Native Router Flux y React Router Native.

Si desea aprender más sobre React, eche un vistazo a nuestra serie Cómo crear código en React.js, o consulte nuestra página del tema React para ver ejercicios y proyectos de programación.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

About the author(s)

Zeb Girouard
See author profile
Category:
Tutorial
Tags:
React

Still looking for an answer?

Ask a questionSearch for more help
Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Sign In or Sign Up to Comment
Creative CommonsThis work is licensed under a Creative Commons Attribution-NonCommercial- ShareAlike 4.0 International License.
Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Become a contributor for community

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Sign Up

DigitalOcean Documentation

Full documentation for every DigitalOcean product.

Learn more

Resources for startups and SMBs

The Wave has everything you need to know about building a business, from raising funding to marketing your product.

Learn more

Get our newsletter

Stay up to date by signing up for DigitalOcean’s Infrastructure as a Newsletter.

New accounts only. By submitting your email you agree to our Privacy Policy

The developer cloud

Scale up as you grow — whether you're running one virtual machine or ten thousand.

Get started for free

Sign up and get $200 in credit for your first 60 days with DigitalOcean.*

*This promotional offer applies to new accounts only.

© 2025 DigitalOcean, LLC.Sitemap.