React Native Navigation: Drawer Navigator

Llegamos al capítulo 3 de la miniserie de React Native Navigation. Ahora vamos a crear el menú lateral o Drawer Navigator.

Pueden chequear el capítulo 1 y el capítulo 2 para que entren en calor.

Lo primero que hacemos es importar nuestro drawer navigator:

import {createDrawerNavigator} from 'react-navigation'

Con la experiencia de los capítulos anteriores creamos nuestro menú con sus respectivos iconos.

const SideMenu = createDrawerNavigator({
  Page1: {screen: Page1, navigationOptions: {
    drawerIcon: ({item}) => (
      <Image source={icons.home} style={{width: 20, height: 20}} />
    )
  } },
  'Usuario': {screen: Page2, navigationOptions: {
    drawerIcon: ({item}) => (
      <Image source={icons.user} style={{width:20, height: 20}}/>
    )
  } }
},
{
  drawerPosition: 'right',
  drawerWidth: Dimensions.get('window').width * 0.80,
  drawerBackgroundColor: '#FFFF21'
})

Revisando un poco el código superior, estamos usando las mismas pantallas de los ejemplos anterior y además al navigationOptions le estamos asignado un drawerIcon, que básicamente lo que hace es devolver la Imagen que yo le asigne.

Al final tenemos 3 propiedades más como son: drawePosition que me permite poner el menú del lado derecho o izquierdo, drawerWidth que permite darle un ancho fijo al menú y drawerBackgroundColor que le asigna un color de fondo. Acá el código del ejemplo.

Y eso es todo, más sencillo no puede ser. Estoy dejando el video al final del post con todo el proceso, así como también el código en Github.

Este el fin de la miniserie de React Navigation, si te gusto déjame un comentario para traer mas series como esta.