我无法完全隐藏标签栏，中间的添加按钮会显示

Question

当我在特定屏幕中使用 tabBarVisible 隐藏标签栏时，中间按钮的上半部分仍然可见（红线上方），有什么想法可以隐藏它吗？

我正在使用 react-navigation v5

const StackNav = (props: any) => {

  React.useLayoutEffect(() => {
    routes.includes(name) 
               ? navigation.setOptions({tabBarVisible: false;})
               : navigation.setOptions({tabBarVisible: true;})
  }, [navigation, route]);

  return (
    <Stack.Navigator>
      <Stack.Screen name="home" component={HomeScreen} />
      <Stack.Screen name="food" component={FoodScreen} />
      <Stack.Screen name="review" component={ReviewScreen} />
    </Stack.Navigator>
  );
};

因此，BottomTab 导航包装了包含应用程序所有屏幕的 StackNav

const BottomTab = () => {
  const Tab = createBottomTabNavigator();

  return (
    <Tab.Navigator
      screenOptions={({route}) => ({
        tabBarIcon: ({focused}) => {
          return <Tab focused={focused} />;
        },
      })}
      >
      <Tab.Screen name="profile" component={StackNav} />
      <Tab.Screen name="story" component={StackNav} />
    </Tab.Navigator>
  );
};

Answer 1

React-navigation 不推荐使用tabBarVisible 选项。解决您的问题，您可以use this workflow to hide the tabBar properly。

原理很简单，就是由父级使用Stack.Navigator从Tab.Navigator中取出不需要tabBar的屏幕。

我将它用于我自己的应用程序using the same tabBar UI as you，它运行良好。