¡INSCRÍBETE A CUALQUIER CURSO CON UN 50% DE DESCUENTO PARA NUEVOS CLIENTES!


No hace mucho que salió React Navigation 2, y aunque los cambios sobre la navegación no son graves, sí pueden ser algo confusos, por ese motivo, en esta entrada vamos a ver cómo utilizar Drawer navigation en la última versión.

Lo primero que debes hacer es crear un proyecto con Expo.io, una vez lo tengamos listo, vamos a instalar algunas dependencias.

Pantallas de Login y Register

Crea 2 archivos nuevos dentro de application/screens, primero login.screen.js y después register.screen.js, serán las pantallas que representen nuestra súper aplicación.

Navigación Drawer y Stack con React Navigation 2

Ya queda menos, vamos a crear el archivo importante de nuestra aplicación, applications/navigations/app.navigation.js, y añadimos el siguiente código que paso a explicar.

  • headerIcon: Icono reutilizable que se mostrará en el header.
  • createStackNavigator: novedad en la v2, lógica de la navegación.
  • navigationOptions: configuración navegación global para cada stack.
  • createDrawerNavigator: navegación lateral (sidemenu).
  • initialRouteName: primera ruta de la navegación

De esta forma tan sencilla conseguimos tener una navegación lateral con un header superior utilizando iconos de FontAwesome, para utilizar esta navegación en nuestro sitio simplemente debemos modificar el archivo App.js con el siguiente código.

Eso es todo, con esto ya tenemos una navegación completamente funcional utilizando la versión 2 de React Navigation, si te interesa aprender a trabajar con React Native te invito a tomar mi curso en Udemy o en Cursosdesarrolloweb.