React Native底部Tab导航嵌套子路由实现咨询

核心思路很明确：给每个底部Tab单独嵌套一个Stack导航器，让Tab内部的页面跳转都在这个子Stack里完成，这样底部Tab会始终保持显示；同时把登录页这类不需要Tab的页面放在根Stack中，和Tab导航器平级。

具体实现步骤 #

1. 先为每个Tab创建内部Stack导航器 #

以Bluetooth Tab为例，创建它的专属Stack，包含Tab首页和所有子页面：

// BluetoothStack.js
import { createStackNavigator } from '@react-navigation/stack';
import BluetoothHome from '../screens/BluetoothHome';
import BluetoothDeviceDetail from '../screens/BluetoothDeviceDetail';
import BluetoothSettings from '../screens/BluetoothSettings';

const Stack = createStackNavigator();

export default function BluetoothStack() {
  return (
    <Stack.Navigator
      screenOptions={{
        headerShown: true, // 可根据需求设置是否显示头部
        headerTitleAlign: 'center'
      }}
    >
      {/* Tab的首页，作为Stack的初始页面 */}
      <Stack.Screen name="BluetoothHome" component={BluetoothHome} options={{ title: '蓝牙' }} />
      {/* Tab内的子页面 */}
      <Stack.Screen name="BluetoothDeviceDetail" component={BluetoothDeviceDetail} options={{ title: '设备详情' }} />
      <Stack.Screen name="BluetoothSettings" component={BluetoothSettings} options={{ title: '蓝牙设置' }} />
    </Stack.Navigator>
  );
}

同理，给其他需要内部跳转的Tab也创建对应的Stack（比如SettingsStack、ProfileStack等）。

2. 构建底部Tab导航器 #

把每个Tab对应的Stack组件作为Tab的component属性值，而非单个页面：

// AppTabs.js
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Ionicons from 'react-native-vector-icons/Ionicons';
import BluetoothStack from './BluetoothStack';
import SettingsStack from './SettingsStack';
import ProfileStack from './ProfileStack';

const Tab = createBottomTabNavigator();

export default function AppTabs() {
  return (
    <Tab.Navigator
      screenOptions={{
        tabBarActiveTintColor: '#2563eb', // 激活态颜色
        tabBarInactiveTintColor: '#9ca3af', // 未激活态颜色
        tabBarLabelStyle: { fontSize: 12 },
        tabBarStyle: { paddingBottom: 5, height: 60 }
      }}
    >
      <Tab.Screen
        name="BluetoothTab"
        component={BluetoothStack}
        options={{
          tabBarLabel: '蓝牙',
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="bluetooth" color={color} size={size} />
          ),
          // 隐藏Tab的头部（因为内部Stack已经有自己的头部）
          headerShown: false
        }}
      />
      <Tab.Screen
        name="SettingsTab"
        component={SettingsStack}
        options={{
          tabBarLabel: '设置',
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="settings" color={color} size={size} />
          ),
          headerShown: false
        }}
      />
      <Tab.Screen
        name="ProfileTab"
        component={ProfileStack}
        options={{
          tabBarLabel: '我的',
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="person" color={color} size={size} />
          ),
          headerShown: false
        }}
      />
    </Tab.Navigator>
  );
}

3. 构建根Stack导航器 #

将登录页和Tab导航器放在根Stack中，实现登录后进入Tab页面，且登录页无底部Tab：

// App.js
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import LoginScreen from './screens/LoginScreen';
import AppTabs from './AppTabs';

const RootStack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <RootStack.Navigator screenOptions={{ headerShown: false }}>
        {/* 登录页，无底部Tab */}
        <RootStack.Screen name="Login" component={LoginScreen} />
        {/* Tab导航器页面，显示底部Tab */}
        <RootStack.Screen name="MainTabs" component={AppTabs} />
      </RootStack.Navigator>
    </NavigationContainer>
  );
}

4. Tab内部页面跳转 #

在Tab的首页（比如BluetoothHome）中，直接用navigation.navigate跳转到子页面即可，底部Tab会保持显示：

// BluetoothHome.js
import { View, Button, StyleSheet } from 'react-native';

export default function BluetoothHome({ navigation }) {
  return (
    <View style={styles.container}>
      <Button
        title="查看设备详情"
        onPress={() => navigation.navigate('BluetoothDeviceDetail')}
      />
      <Button
        title="蓝牙设置"
        onPress={() => navigation.navigate('BluetoothSettings')}
        style={styles.button}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    gap: 16
  },
  button: {
    marginTop: 10
  }
});

关键注意事项 #

• 绝对不要把Tab的子页面放在根Stack中，否则跳转时会隐藏底部Tab
• 每个Tab的内部Stack可以独立配置头部样式，灵活度更高
• 根Stack只负责全局级别的页面跳转（比如登录→Tab页面），Tab内部的页面流转完全由对应子Stack处理

内容的提问来源于stack exchange，提问作者Guido Gagliardini