React Native中使用Native-Base时在指定屏幕隐藏TabBar的问题求助

看起来你遇到的是React Navigation嵌套结构下TabBar显示控制的常见问题——因为你的ViewCarte和Compte是嵌套在TabNavigator内部的StackNavigator里的子屏幕，直接在子屏幕设置tabBarVisible可能不会生效，因为TabBar的控制权在父级TabNavigator手里。下面给你两种可行的解决方案：

方案一：通过TabNavigator动态判断当前路由（推荐） #

这个方法不需要修改子组件，直接在TabNavigator的Tab.Screen配置里，根据嵌套Stack的当前路由状态来决定是否显示TabBar。

修改你的ViewLoc组件中的Tab.Navigator部分：

function ViewLoc({navigation}) {
  return (
    <NativeBaseProvider>
      <Tab.Navigator initialRouteName="Recherche"
        tabBarOptions={{
          activeTintColor: '#0B3D91',
          style: {
            padding: 5,
            height: 60,
          },
          tabStyle: {
            paddingTop: 8,
            paddingBottom: 8,
          },
        }}>
        <Tab.Screen 
          name="Recherche" 
          component={Recherche}
          options={({ route }) => ({
            tabBarIcon: ({color, size}) => (
              <SearchIcon color={color} size={size} />
            ),
            // 当Stack当前路由是ViewCarte时隐藏TabBar
            tabBarVisible: !(route.state?.routes[route.state.index].name === 'ViewCarte')
          })} 
        />
        <Tab.Screen 
          name="Mon espace" 
          component={MonEspace}
          options={({ route }) => ({
            tabBarIcon: ({color, size}) => <ProfileIcon color={color} />,
            // 当Stack当前路由是Compte时隐藏TabBar
            tabBarVisible: !(route.state?.routes[route.state.index].name === 'Compte')
          })} 
        />
      </Tab.Navigator>
    </NativeBaseProvider>
  );
}

原理说明： #

• route.state会获取到嵌套StackNavigator的状态，route.state.index是当前Stack的活跃路由索引，route.state.routes[route.state.index].name就是当前显示的子屏幕名称。
• 通过判断当前子屏幕是否是目标屏幕，动态设置tabBarVisible为false或true。

方案二：在子屏幕中控制父TabNavigator的显示 #

如果方案一不生效（比如某些React Navigation版本的差异），可以直接在ViewCarte和Compte组件中，通过navigation.dangerouslyGetParent()获取父级TabNavigator的实例，然后设置其选项来隐藏TabBar。

以ViewCarte为例：

import React, { useEffect } from 'react';
// 导入你的其他依赖

function ViewCarte({ navigation }) {
  useEffect(() => {
    // 获取父级Tab导航器
    const parentTabNavigator = navigation.dangerouslyGetParent();
    
    // 隐藏TabBar
    parentTabNavigator.setOptions({ tabBarVisible: false });

    // 组件卸载时恢复TabBar显示（返回上一页时）
    return () => {
      parentTabNavigator.setOptions({ tabBarVisible: true });
    };
  }, [navigation]);

  // 你的组件内容
  return (
    // ... 原ViewCarte的UI代码
  );
}

同样的逻辑复制到Compte组件中即可。

注意事项： #

• dangerouslyGetParent()虽然名字带"dangerously"，但在这种嵌套导航场景下是安全的用法，官方文档也有提及。
• 一定要在useEffect的清理函数中恢复TabBar的显示，否则从目标屏幕返回后TabBar会一直隐藏。

测试一下这两种方案，应该就能解决你的问题了。

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