DRAWER NAVIGATOR
Drawer Navigator es una utilidad de React Navigation que también nos va a permitir navegar entre las pantallas de nuestra aplicación móvil. Nos va a proporcionar una caja como elemento de navegación con la que tendremos que interactuar para que se lleve a cabo la funcionalidad de transición entre pantallas.
Con la experiencia que hemos adquirido hasta el momento, podemos darnos cuenta que en todos los navegadores anteriores que hemos implementado, solo hemos generado las pantallas principales por las que vamos a navegar, hemos realizado la instalación de la utilidad que vamos a usar y enseguida hacemos la implementación de la navegación, y sin excepción haremos lo mismo.
Recuerda que en el video solo se mostrará la implementación de la navegación con la utilidad Drawer Navigator de React Navigation, por lo que la creación del proyecto, la visualización a través de Expo Go app y la carga del proyecto en Entorno de Desarrollo Integrado (IDE) deberá ser realizada antes de continuar con el video, en caso de que quieras seguir el trabajo que se realiza en él.
Entonces, en el directorio destinado para crear tus proyectos, crea un proyecto llamado DrawerNavigator, con un tipo de proyecto Flujo de Trabajo Administrado – Managed Workflow y en blanco – Blank.
REFORZAMIENTO
Para ejercitar lo aprendido, revisa los atributos o propiedades de Drawer Navigator que se pueden cambiar e intenta probar para ver que sucede cada vez que las manipulas.
Drawer Navigator – Documentación oficial de React Navigation
Puedes practicar aquí.
Creación de navegabilidad con Drawer Navigator en React Native – ver proyecto completo
Una vez que tengas la certeza de los cambios que hiciste, puedes implementarlos en tu proyecto para que regreses a él cuando necesites recordar algo de lo que hiciste.
Si no has conseguido algún resultado modificando los atributos de esta utilidad de navegación de React Navigation, no te preocupes, revisa el siguiente código y trata de comprenderlo. Como de Desarrollador de Aplicaciones Móviles con React Native también tienes que aprender a leer códigos y saberlos interpretar, toma este ejercicio para reforzar esta parte que también es muy importante, es otra forma de aprender.
En el siguiente ejemplo, agregamos un poco de estilo al contenido, modificamos el color del encabezado de las pantallas, el color del panel donde se muestra el menú y también agregamos iconos al menú del navegador Drawer Navigator.
Creación de navegabilidad con Drawer Navigator en React Native – modificación de atributos – ver proyecto completo