BOTTOM TABS NAVIGATOR
Bottom Tabs Navigator es otra utilidad que tiene la librería React Navigation para poder navegar entre las pantallas de nuestra aplicación móvil, tiene la principal característica de situarse automáticamente en la parte inferior de la pantalla de nuestra aplicación móvil, proporcionándonos, también de manera automática, los botones para poder navegar entre ellas.
Hasta este momento del curso de Programación de Aplicaciones Móviles con React Native ya tenemos cierta experiencia creando proyectos con la herramienta Expo CLI, por lo que a partir de este instante omitiremos en los video la creación de los proyectos en los que vamos a trabajar.
Si quieres seguir el trabajo que se hace en el siguiente video, será necesario, primero crear el proyecto llamado BottomTabsNavigator, en un tipo de proyecto Flujo de Trabajo Administrado (Managed Workflow) y en blanco (blank).
Recuerda que como buena práctica es importante tener un directorio destinado para crear tus proyectos.
REFORZAMIENTO
Para seguir practicando y ejercitar lo aprendido, sería bueno revisar los atributos o propiedades que se pueden cambiar en este tipo de navegabilidad e intentes probar para ver que sucede cada vez que las manipulas y una vez que tengas la certeza de los cambios puedes implementarlos en tu proyecto para que regreses a él cuando necesites recordar algo de lo que hiciste.
Bottom Tabs Navigator – Documentación oficial de React Navigation
Puedes practicar aquí.
Creación de navegabilidad con Bottom Tabs Navigator en React Native – ver proyecto completo
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, modificamos el color del encabezado de nuestras pantallas y el color de los iconos y texto de los botones de Bottom Tabs Navigator.
Puedes ver el ejercicio completo aquí.
Creación de navegabilidad con Bottom Tabs Navigator en React Native – modificación de atributos – ver proyecto completo