Cómo Configurar un Stack Navigator Dentro de un Tab Navigator en React Navigation

Tiempo de lectura: 2 minutos

En este tutorial aprenderás cómo configurar un Stack.Navigator dentro de un Tab.Navigator. Esto es útil cuando necesitas que ciertas pantallas estén agrupadas bajo una pestaña específica (por ejemplo, una pantalla de perfil con opciones adicionales).

Aprenderás cómo configurar una navegación mixta utilizando un Stack.Navigator dentro de un Tab.Navigator y viceversa, simulando una estructura como la siguiente:

Pantallas principales:

• Inicio (Tab Navigation)
• Buscar (Tab Navigation)
• Perfil (Tab Navigation con navegación interna a través de Stack)

Subpantallas del perfil:

• Login
• Configuraciones

---

Paso 1: Instalar Dependencias

Asegúrate de tener instaladas las dependencias necesarias para React Navigation:

npm install @react-navigation/native @react-navigation/stack @react-navigation/bottom-tabs react-native-screens react-native-safe-area-context react-native-gesture-handler react-native-reanimated react-native-vector-icons

Si usas expo, ejecuta:

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context react-native-vector-icons react-native-get-random-values

---

Paso 2: Configurar Stack y Tab Navigators

Crear el Stack Navigator para el Perfil

El Stack.Navigator manejará la navegación interna dentro de la sección Perfil:

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import LoginScreen from './screens/LoginScreen';
import ConfigScreen from './screens/ConfigScreen';

const Stack = createStackNavigator();

export default function PerfilStackNavigator() {
  return (
    <Stack.Navigator initialRouteName="Login">
      <Stack.Screen name="Login" component={LoginScreen} options={{ headerShown: false }} />
      <Stack.Screen name="Configuraciones" component={ConfigScreen} options={{ headerTitle: 'Configuraciones' }} />
    </Stack.Navigator>
  );
}

---

Crear el Tab Navigator Principal

El Tab.Navigator será el contenedor principal de las pestañas de navegación.

import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import HomeScreen from './screens/HomeScreen';
import SearchScreen from './screens/SearchScreen';
import PerfilStackNavigator from './PerfilStackNavigator';
import { FontAwesome, AntDesign } from '@expo/vector-icons';

const Tab = createBottomTabNavigator();

export default function MainTabNavigator() {
  return (
    <Tab.Navigator
      initialRouteName="Inicio"
      screenOptions={{
        tabBarActiveTintColor: 'tomato',
        tabBarInactiveTintColor: 'gray',
        headerShown: false,
      }}
    >
      <Tab.Screen
        name="Inicio"
        component={HomeScreen}
        options={{
          tabBarLabel: 'Inicio',
          tabBarIcon: ({ color, size }) => <AntDesign name="home" size={size} color={color} />,
        }}
      />
      <Tab.Screen
        name="Buscar"
        component={SearchScreen}
        options={{
          tabBarLabel: 'Buscar',
          tabBarIcon: ({ color, size }) => <FontAwesome name="search" size={size} color={color} />,
        }}
      />
      <Tab.Screen
        name="Perfil"
        component={PerfilStackNavigator} // Aquí incluimos el Stack.Navigator
        options={{
          tabBarLabel: 'Perfil',
          tabBarIcon: ({ color, size }) => <FontAwesome name="user" size={size} color={color} />,
        }}
      />
    </Tab.Navigator>
  );
}

---

Paso 3: Configurar el Navegador Principal

El navegador principal contendrá el Tab.Navigator. Este es el nivel raíz de la navegación de la aplicación.

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import MainTabNavigator from './MainTabNavigator';

export default function App() {
  return (
    <NavigationContainer>
      <MainTabNavigator />
    </NavigationContainer>
  );
}

---

Paso 4: Crear las Pantallas

Ejemplo básico de una pantalla como LoginScreen:

import React from 'react';
import { View, Text, Button } from 'react-native';

export default function LoginScreen({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Pantalla de Login</Text>
      <Button title="Ir a Configuraciones" onPress={() => navigation.navigate('Configuraciones')} />
    </View>
  );
}

---

Paso 5: Personalizar Navegación

Puedes personalizar estilos, animaciones y opciones del navegador. Por ejemplo, agrega un título o cambia el estilo de transición para el Stack.Navigator dentro de Perfil:

<Stack.Navigator
  initialRouteName="Login"
  screenOptions={{
    headerStyle: { backgroundColor: 'tomato' },
    headerTintColor: '#fff',
    headerTitleStyle: { fontWeight: 'bold' },
  }}
>
  {/* Tus pantallas aquí */}
</Stack.Navigator>

---

Resultado Final

Con esta configuración, tienes:

1. Un Tab.Navigator con tres pestañas (Inicio, Buscar, Perfil).
2. Un Stack.Navigator dentro de Perfil que permite navegar entre Login y Configuraciones.

---

Prueba la Navegación

Ejecuta tu aplicación y navega entre las pestañas y las pantallas internas:

npm start