React Native中如何正确组合StackNavigator与TabNavigator隐藏跳转页标签栏

核心逻辑 #

你当前的导航嵌套思路是完全正确的：将包含多个页面的栈导航作为底部标签导航的其中一个子项，整个栈内的所有页面都会自动继承显示底部标签栏，不需要调整嵌套层级结构。

现有代码适配调整（适用于React Navigation 4.x及更早版本） #

你的现有代码只需要补充栈导航的头部配置即可正常生效，跳转时在StartRun页面直接调用navigation.navigate('Running')就能进入带底部标签栏的Running页面：

const RunStackNavigator = createStackNavigator({
  StartRun: {
    screen: StartRun,
  },
  Running: {
    screen: Running,
  },
}, {
  // 可选配置：隐藏栈导航自带的顶部标题栏，自己在页面内实现自定义头部
  headerMode: 'none'
});

const HomeTabNavigator = createBottomTabNavigator({
  StartRun: {
    screen: RunStackNavigator,
    navigationOptions: {
      tabBarLabel: '开始跑步'
    }
  },
  Activity: {
    screen: Activity,
    navigationOptions: {
      tabBarLabel: '活动'
    }
  }
});

React Navigation 6.x 版本适配写法 #

如果你使用的是新版React Navigation，对应写法调整如下，嵌套逻辑保持一致：

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

// 定义跑步相关的栈导航
const RunStack = createNativeStackNavigator();
function RunStackNavigator() {
  return (
    <RunStack.Navigator screenOptions={{ headerShown: false }}>
      <RunStack.Screen name="StartRun" component={StartRun} />
      <RunStack.Screen name="Running" component={Running} />
    </RunStack.Navigator>
  );
}

// 定义底部标签导航
const Tab = createBottomTabNavigator();
function HomeTabNavigator() {
  return (
    <Tab.Navigator>
      <Tab.Screen 
        name="StartRunTab" 
        component={RunStackNavigator} 
        options={{ title: '开始跑步' }} 
      />
      <Tab.Screen 
        name="Activity" 
        component={Activity} 
        options={{ title: '活动' }} 
      />
    </Tab.Navigator>
  );
}

注意事项 #

• 跳转时不要调用根导航的跳转方法，直接使用StartRun页面自带的navigation对象跳转Running即可
• 如果需要在某一个栈页面隐藏底部标签栏，可以单独给对应页面配置tabBarVisible: false（不同版本配置字段略有差异）

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