React Navigation中嵌套路由页面隐藏底部Tab栏的问题求助

我来帮你搞定这个嵌套页面隐藏底部Tab栏的问题，咱们先理清问题所在，再给出修复方案：

现有代码的问题分析 #

你的代码里有几个关键问题导致嵌套页面的Tab栏隐藏设置不生效：

1. Tab导航器中tabBarVisible的语法错误：你写的判断逻辑存在语法问题，if语句缺少包裹括号，而且用navigation.navigate()来判断当前路由是错误的——这个方法是用来跳转页面的，不是获取当前路由状态的。
2. 路由名称拼写不一致：你在incidentStack里定义的页面路由是'insight detail adjustment'，但在Tab导航器的判断里写成了'incident detail adjustment'，名称不匹配直接导致判断失效。
3. 嵌套栈页面无法直接控制父Tab栏：在旧版React Navigation（v4及以下）中，嵌套栈的页面不能通过自身navigationOptions里的bottomTabs配置来控制父Tab导航器的显示状态，必须由父Tab导航器根据当前嵌套栈的活跃路由动态调整。

修复方案 #

我们需要修改Tab导航器中Incidents的navigationOptions，让它根据嵌套栈的当前活跃路由来决定是否显示Tab栏：

修正后的完整代码 #

const incidentStack = createStackNavigator({
  'incident Overview': {
    screen: incidentOverview,
    navigationOptions: ({navigation}) => ({
      title: 'Pointbreak',
      headerLeft: (
        <TouchableOpacity onPress={() => navigation.openDrawer()}>
          <Image style={{marginLeft: 10}} source={require('../img/menu.png')}></Image>
        </TouchableOpacity>
      )
    })
  },
  'insight detail adjustment': {
    screen: InsightDetailAdjustment,
    navigationOptions: ({navigation}) => ({
      header: (
        <HeaderTitleInsightDetailAdjustment navigation={navigation}/>
      )
      // 这里的bottomTabs配置可以删掉，父Tab导航器会统一控制显示
    })
  }
})

const AppNavigator = createBottomTabNavigator(
  {
    Insights: {
      screen: InsightsStack,
      navigationOptions: {
        tabBarIcon: ({tintColor}) => (
          <Icon name='chart-line-variant' size={30} color={tintColor}/>
        ),
      }
    },
    Incidents: {
      screen: incidentStack,
      navigationOptions: ({navigation}) => ({
        // 动态判断Tab栏是否可见
        tabBarVisible: () => {
          // 获取嵌套栈当前活跃的路由信息
          const currentNestedRoute = navigation.state.routes[navigation.state.index];
          // 匹配到目标页面则隐藏Tab栏，否则显示
          return currentNestedRoute.routeName !== 'insight detail adjustment';
        },
        tabBarIcon: ({tintColor}) => (
          <Icon name='bullhorn-outline' size={30} color={tintColor}/>
        ),
      })
    },
  }
)

关键说明 #

• 获取嵌套栈路由：通过navigation.state.routes[navigation.state.index]可以拿到当前嵌套栈的活跃路由，navigation.state.index是嵌套栈当前显示页面的索引位置。
• 路由名称一致性：一定要确保判断时使用的路由名称和incidentStack中定义的完全一致，大小写、空格都不能出错，否则判断逻辑会失效。
• 移除无效配置：嵌套页面里的bottomTabs: { visible: false }可以直接删掉，因为这个配置在旧版React Navigation中无法控制父Tab导航器的显示状态。

如果你的React Navigation是v5+版本（采用函数式的createStackNavigator写法），实现方式会略有不同，但从你的代码风格来看应该是v4及以下版本，上面的方案完全适用。

内容的提问来源于stack exchange，提问作者Jonas.D