MATERIAL TOP TABS NAVIGATOR
Material Top Tabs Navigator es otra utilidad más de React Navigation para movernos entre las pantallas de nuestra aplicación móvil, además de situarse en la parte superior y proporcionarnos de manera automática los botones de navegación, tiene la funcionalidad que nos permite cambiarnos de pantalla con solo deslizar la pantalla actual hacia la izquierda o a la derecha.
Al igual que los demás navegadores que hemos visto, este también tiene la forma de personalizar características funcionales y de diseño. Por su similitud, en cuanto a implementación y uso con Bottom Tabs Navigator, será un poco más fácil poder implementarlo.
Recuerda que en el video solo se mostrará la implementación de la navegación con la utilidad Material Top Tabs 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 querer seguir el trabajo que se realiza en él.
Entonces, en el directorio destinado para crear tus proyectos, crea un proyecto llamado MaterialTopTabsNavigator, 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 Material Top Tabs Navigator que se pueden cambiar en este tipo de navegabilidad e intenta probar para ver que sucede cada vez que las manipulas.
Material Top Tabs – Documentación oficial de React Navigation
Puedes practicar aquí.
Creación de navegabilidad con Material Top Tabs 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, modificamos el color del encabezado y el color de los iconos y texto de los botones del navegador Material Top Tabs Navigator.
Creación de navegabilidad con Material Top Tabs Navigator en React Native – modificación de atributos – ver proyecto completo