Instalación de React Navigation versión 5 en React Native con Expo

Contenido del curso

Configuración del entorno de desarrollo

Primeros pasos con React Native

React Navigation

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:008:11

Instalación de React Navigation versión 5 en React Native con Expo

Curso de Introducción a React Native

Clase 13 de 16

Clase 13 / 16

Recursos

Crear un eficiente sistema de navegación en React Native es fundamental para ofrecer a los usuarios una experiencia fluida e intuitiva al desplazarse por distintas pantallas o screens. React Navigation es una biblioteca que permite configurar fácilmente diferentes tipos de navegación, como navegación tipo pestaña (tab navigation) y navegación lateral mediante menús tipo drawer navigation. Con un sencillo procedimiento de instalación y configuración, esta clase muestra cómo integrar estos elementos en una aplicación.

¿Qué es React Navigation y cómo funciona?

React Navigation es una biblioteca clave en React Native que facilita la implementación de distintos métodos de navegación entre pantallas. Gracias a esta herramienta, se pueden crear múltiples páginas o screens y desplazarse cómodamente entre ellas. Las principales modalidades de navegación contempladas son:

Tab Navigation: permite situar un menú en la parte inferior para cambiar rápidamente entre pantallas.
Drawer Navigation: un menú desplegable lateral que ofrece acceso directo a diversas secciones o pantallas.
Stack Navigation: organiza pantallas relacionadas en pilas o grupos, facilitando mantener estructuradas áreas del proyecto como sesiones o cuentas de usuario.

¿Cómo instalar correctamente React Navigation en React Native con Expo?

La instalación y configuración inicial de React Navigation versión 5, especialmente indicada para evitar inconvenientes en proyectos que no utilizan TypeScript, es bastante sencilla. Los pasos clave resumidos son:

Ir a la página oficial navigation.org, seleccionar la versión 5.x y acceder a Get Started.
Instalar los paquetes básicos mediante Expo, copiando el comando provisto por la documentación:

expo install @react-navigation/native react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

Añadir al archivo App.js la importación básica solicitada en la documentación oficial:

import 'react-native-gesture-handler';

¿Qué instalaciones adicionales requiere React Navigation?

Para sacar el máximo provecho a Reactive Navigation, es necesario instalar paquetes específicos para cada tipo de navegación:

Stack Navigation: Maneja la navegación a través de apilado o pilas de pantallas relacionadas.
```
yarn add @react-navigation/stack
```
Tab Navigation: Gestiona la navegación por pestañas situadas generalmente en la parte inferior de la aplicación.
```
yarn add @react-navigation/bottom-tabs
```
Drawer Navigation: Para habilitar un menú desplegable lateral.
```
yarn add @react-navigation/drawer
```

Estas instalaciones proporcionan las funcionalidades necesarias para cada tipo específico de navegación en aplicaciones React Native.

¿Cómo terminar la configuración inicial para usar navegación?

Resulta indispensable envolver la aplicación completa con el NavigationContainer. Este elemento permite que toda la aplicación acceda plenamente a los métodos, propiedades y hooks proporcionados por React Navigation. El procedimiento consiste en:

Importar el contenedor en App.js:

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

Encapsular toda la aplicación:

export default function App() {
  return (
    <NavigationContainer>
      {/* Tu aplicación va aquí */}
    </NavigationContainer>
  );
}

Este paso permite que React Navigation tome control sobre la navegación de la aplicación desde el primer renderizado.

Después de realizar todas las instalaciones y configuraciones mencionadas, se recomienda verificar que la aplicación corra sin errores ejecutando el servidor con:

expo start

Presiona la tecla correspondiente para comprobar en los emuladores de iOS y Android.

¿Has probado ya integrar React Navigation? ¿Hay algún detalle que te gustaría profundizar? ¡Comparte tu experiencia o dudas en los comentarios!

Kevin Parra Lopez

Hace 4 años

Si ves esto despues del 02/03/2023

Asi es como se configura

React Navigation | React Navigation

Instalamos React Navigation

npm install @react-navigation/native

Instalamos las dependencias necesarias para Expo

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

Installing the native stack navigator library

npm install @react-navigation/native-stack

Tab navigation

npm install @react-navigation/bottom-tabs

(Antes de instalar Drawer configurar esto)

Instalamos paquetes adicionales para expo

npx expo install react-native-gesture-handler react-native-reanimated

E importamos el gesture en nuestro app.js

import 'react-native-gesture-handler';

Drawer navigation

npm install @react-navigation/drawer

Envolvemos la aplicación en este container

import { StyleSheet, Text, View } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import 'react-native-gesture-handler';

export default function App() {
  return (
    <NavigationContainer>
      <View style={styles.container}>
        <Text>Que chimba esto mka</Text>
      </View>
    </NavigationContainer>
  );
}

Freud Alexandro Múnera González

Hace 4 años

Gracias, saludos desde Medallo parcero.

Daniel Osorno

Hace 3 años

gracias por este aporte parce

Comentarios (34)34 comentarios

Juan Carlos Barbaran Meza

Hace 5 años

Veronica Osorio Cardona

Miguel Sosa

Luis Alejandro Nieto Ruth

Luis Fernando Pedroza Taborda

Hugo Alexander Hernandez Serrano

Cristian Javier Lizardìa

Effren Anthony Peña Sánchez

Carlos Xavier Gomez Barriento

Meryovi De Dios

Carlos Daniel Galván Morales

Ramón Torres

Maico Paul RZ

David Rangel

Hace un año

Anderson Josué Oroya Silva

Yessica Rios

Dayona Diocelyn Herrera Garcia

Hace 2 años

Gianella Marin

Humberto Leon

Roni Edwin Oyardo Acuña

Daniel Ruminot

Roberto Enrique Ajuchan Lopez

Brayan Rúa Velásquez

Hace 5 meses

David Álvaro Joyo Huamán

Hace 6 meses

Wladimir Rocha

Configuración del entorno de desarrollo

Desarrollo de Apps Móviles con React Native y Expo

Instalación de Visual Studio Code para React Native

Configuración de Visual Studio Code para React Native

Instalación de Node JS y creación de proyectos React Native con Expo

Instalación del emulador de Xcode para aplicaciones iOS

Instalación de Android Studio y creación de emulador

Ejecutar aplicaciones React Native en dispositivos físicos con Expo Go

Primeros pasos con React Native

Estructura de un proyecto React Native con Expo

Creación de componentes de React Native con Expo

Props en React Native: envío de datos entre componentes

Asignación de default props en componentes React

Validación de Props con PropTypes en React

React Navigation

Instalación de React Navigation versión 5 en React Native con Expo

Cómo crear un stack de navegación en React Native

Creación de menú de pestañas en React Navigation

Drawer Navigation en React Native

Instalación de React Navigation versión 5 en React Native con Expo

Progreso del curso

Configuración del entorno de desarrollo

Primeros pasos con React Native

React Navigation

Recursos

Recursos