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

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的screen去掉

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