Navegación en React Native 1: Drawer (React Navigation)

 

Logo de React Navigation

Como su nombre indicia React Navigatión es una librería que nos permite ajustar el comportamiento que tendrá nuestra aplicación para desplazarnos a través de las diferentes pantallas de la misma.

Como muchos ya intuirán existen diversos tipos de Navegación, en esta guía haremos uso de uno de los patrones mas comunes: el Drawer.

¿Qué es un Drawer?

Un Drawer (o Cajón) es un patrón de navegación que permite desplegar un menú lateral donde podremos seleccionar entre diversas pantallas de nuestra aplicación, este Drawer puede ser mostrado por gestos (deslizando el dedo desde el borde de la pantalla) o por un botón usualmente conocido como "menú Hamburguesa", su aspecto es el siguiente:

Instalación de librerías

Para empezar debemos de instalar las librerías necesarias en nuestro proyecto, estas son:

 @react-navigation/native

@react-navigation/drawer

Es posible instalarlas via npm, yarn o si tu proyecto es de expo usar expo install es recomendable, por ejemplo:

• npm

npm install @react-navigation/native

• yarn

yarn add @react-navigation/native

• expo

expo install @react-navigation/native

1.- Creando el Drawer Navigator

Creamos una carpeta llamada navigators y dentro de ella un archivo llamado DrawerNavigator.js

Dentro de este archivo importamos las librerías requeridas:

A continuación creamos una constante llamada Drawer que tendrá como valor el resultado de la función createDrawerNavigator()

Añadimos la función MyDrawer con el siguiente código:

Cómo se puede observar en la captura es una función muy simple que retorna nuestro Drawer creado anteriormente, guardaremos este archivo así y continuaremos con la siguiente parte.

2.- Creando nuestras pantallas

El siguiente paso es crear las pantallas que usaremos en nuestro Drawer y que serán las que el usuario podrá seleccionar del menú, para esto crearemos una carpeta llamada screens y dentro de ella otra llamada main, dentro de esta ultima carpeta crearemos dos archivos uno llamado Overview.js y otra llamada Details.js

Dentro del Archivo Overview cargaremos el siguiente código:

Dentro del archivo Details cargaremos el contenido siguiente:

3.- Agregando nuestras pantallas al Drawer

Finalmente agregaremos nuestras pantallas al drawer que creamos previamente para esto, debemos importar nuestras pantallas en el archivo DrawerNavigator.js

import Overview from '../screens/Main/Overview';

import Details from '../screens/Main/Details';

(Ajusta las rutas de tus archivos si es necesario)

La sección de imports del archivo queda de la siguiente forma:

Para cargar nuestras pantallas al Drawer solo debemos ingresar estas dos lineas:

      <Drawer.Screen name="Vista general" component={Overview} />

      <Drawer.Screen name="Detalles" component={Details} />

 

entre los tags:

<Drawer.Navigator>

</Drawer.Navigator>

El archivo quedara de la siguiente forma:

El atributo name es el nombre que tendrá la pantalla en el Drawer y el atributo component es el componente (en este caso la pantalla) que se mostrará.

Posteriormente agregaremos un ultimo import:

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

Envolveremos nuestro bloque <Drawer.Navigator> dentro de un tag   <NavigationContainer> que es necesario para cualquier navigator y exportaremos el nuestro Drawer con la sentencia: 

export default MyDrawer;

El archivo final quedara de la siguiente forma:

3.- Ejecutando nuestro Navigator

Para finalizar en nuestro archivo app.js que se encuentra en la raíz de nuestro proyecto, importamos nuestro archivo DrawerNavigator.js

import DrawerNavigator from './navigators/DrawerNavigator';

Posteriormente dentro de la función return de este archivo agregaremos:

<DrawerNavigator/>

Y listo si deslizamos desde la parte izquierda de la pantalla podremos ver nuestro Drawer y si hacemos click en Detalles cambiaremos de pantalla:

Y listo con eso tenemos nuestro Drawer completamente funcional.

En próximas entregas lo personalizaremos para tener una mejor apariencia  

Esto es todo por esta vez, espero sea de ayuda

Saludos desde México!