Explorando la Navegación con Tabs y su Integración en la Aplicación

En las secciones anteriores, exploramos cómo funcionan Stack Navigation y Drawer Navigation. Ahora es momento de hablar sobre otro componente fundamental en la navegación de aplicaciones: el Bottom Tab Navigation.

¿Qué es el Bottom Tab Navigation y cómo funciona?

El Bottom Tab Navigation, como su nombre indica, es un sistema de navegación ubicado en la parte inferior de la pantalla. Este esquema permite dividir tu aplicación en múltiples secciones accesibles mediante pestañas (o “tabs”).

Un aspecto interesante es cómo estas tabs funcionan internamente. Cuando se carga el componente que contiene estas tabs, no significa que todas se inicialicen simultáneamente. Cada tab se carga de manera “lazy” (bajo demanda). Una vez que se inicializa una tab, esta permanece activa. Esto tiene implicaciones importantes, especialmente cuando trabajas con hooks como useEffect:

• Si un useEffect no tiene dependencias y se dispara al entrar al Tab 1, este no volverá a ejecutarse si te mueves a Tab 2 y luego regresas al Tab 1.
• Los tabs que no han sido visitados (por ejemplo, Tab 2 o Tab 3) no ejecutarán sus efectos hasta que el usuario los abra por primera vez.

Esto proporciona un manejo eficiente de recursos, ya que las pantallas no utilizadas permanecen inactivas hasta ser necesarias.

Desglose del Esquema de Navegación

La imagen adjunta proporciona una vista clara del flujo de navegación:

1. Drawer Navigation (navegación principal):

   • Representa el nivel más alto en nuestra estructura.
   • Permite cambiar entre dos secciones principales:
     • TabsComponent (el contenedor de nuestros Bottom Tabs).
     • SettingsScreen, que funciona como una pantalla independiente.

2. TabsComponent (Bottom Tabs):

   • Dentro del contenedor de tabs, tenemos tres pestañas principales:
     • Tab1Screen: Pantalla independiente.
     • Tab2Screen: Otra pantalla independiente.
     • StackNavigator: En lugar de ser una pantalla única, este tab contiene su propio stack de navegación.

3. StackNavigator dentro de un Tab:

   • El StackNavigator incluye varias pantallas:
     • Página 1
     • Página 2
     • Página 3
     • Persona
   • Esto demuestra la flexibilidad de los tabs: pueden contener stacks completos en lugar de pantallas simples.

Implementación en Nuestra Aplicación

En nuestra aplicación, la navegación fluye de la siguiente manera:

1. Drawer Navigation:

   • Esta navegación actúa como el punto de entrada principal.
   • Nos permite alternar entre la sección de settings y las tabs principales.

2. TabsComponent con Bottom Tabs:

   • Dentro del componente de tabs, tenemos tres pestañas:
     • Tab 1: Una pantalla independiente.
     • Tab 2: Otra pantalla independiente.
     • StackNavigator (Tab 3): Este tab utiliza un stack para gestionar múltiples pantallas, como “Página 1” o “Persona”.

3. Visibilidad de Tabs:

   • Los tabs permanecen visibles mientras navegamos dentro del StackNavigator, excepto en casos específicos (por ejemplo, en pantallas como “Persona”).

4. Flexibilidad Total:

   • Los tabs pueden contener stacks, pantallas independientes o incluso otras tabs (como top tabs). Este enfoque modular permite diseñar estructuras complejas, como en aplicaciones estilo Twitter, donde puedes deslizar entre pantallas dentro de un tab.

Planificación: La Clave para una Navegación Eficiente

Un punto crucial al implementar sistemas de navegación como este es planificar previamente el flujo de las pantallas. Diseñar un mapa o esquema como el de la imagen ayuda a visualizar cómo se conectarán las diferentes secciones de la aplicación y qué componentes necesitarás.

¿Qué sigue?

Aunque aquí nos hemos centrado en los Bottom Tabs, nuestra aplicación también incorporará Top Tab Navigation. Este esquema, similar a los tabs inferiores, organiza las secciones en la parte superior de la pantalla y es útil en casos como vistas categorizadas o listas filtradas.

En los próximos pasos, implementaremos estas top tabs como otra opción dentro de nuestra estructura, expandiendo aún más la versatilidad de nuestra aplicación.