How to hide bottom navigation bar on a specific screen in react native?

Question

I am using React Native and React Native Navigation to build out my application. Currently, I have three bottom tabs: Home, Upload Video and Messages. Upon selection of the Upload Video tab, I want to render the Upload Video component and hide the bottom tabs on just that screen, and display a header with 'Cancel' (takes them back to the HomeView) and 'Post' buttons (this has already been done). I've had an extremely difficult time hiding the tab bar on this specific screen.

I tried following the code here (How can I hide the bottom tab bar on a specific screen (react-navigation 3.x)); however, that ended up being unsuccessful and I was not able to hide the bottom tabs on any of the screens this way.

Currently, I have this as my bottom navigator:

const BottomTabNavigator = createBottomTabNavigator({
    HomeView: {
        screen: HomeView,
    },
    VideoView: {
        screen: VideoSelectionView
    },
    Messages: {
        screen: SearchView
    }
});

Any insight would be extremely helpful, thanks.

Answer 1

我以前所未有的方式浏览互联网来找到这个问题的解决方案，因为文档提供的解决方案根本不起作用。

我有以下导航设置：

• 底部标签
  • A（本机堆栈）
    • 1（屏幕）
    • 2（屏幕）
    • 3（屏幕）
  • B（本机堆栈）
  • C（本机堆栈）

我想隐藏屏幕 1 中的底部栏。最终实现的技巧是相应屏幕中的以下代码片段：

  useEffect(() => {
    navigation.getParent()?.setOptions({
      tabBarStyle: {
        display: "none"
      }
    });
    return () => navigation.getParent()?.setOptions({
      tabBarStyle: undefined
    });
  }, [navigation]);

该效果在导航道具更新时运行，并在屏幕打开后隐式运行。我可以使用getParent()底部选项卡导航器并可以使用 来设置选项setOptions(...)。要恢复底部选项卡，必须手动设置选项。我通过返回在调用中重置 tabBarStyle 的方法解决了这个问题useEffect()。这个调用是在清理的时候进行的，这意味着它会在屏幕卸载后立即运行。

愿这能让你们免于我所经历的绝望。

Answer 2

You need to specify for each TabBar screen or stack for which you need to hide tabbar,

const BottomTabNavigator = createBottomTabNavigator({
    HomeView: {
        screen: HomeView,
        navigationOptions:()=>{
          return {
            tabBarVisible:false,
          };
       }
    },
    VideoView: {
        screen: VideoSelectionView
    },
    Messages: {
        screen: SearchView
    }
});

Answer 3

仅将 tabBarStyle 设置为 none 对我来说不起作用，我也需要使用属性 tabBarVisible，如果使用挂钩，您可以执行类似的操作：

export function useHideBottomBar() {
    const navigation = useNavigation();

    useEffect(() => {
        navigation.getParent()?.setOptions({ tabBarStyle: { display: 'none' }, tabBarVisible: false });
        return () =>
            navigation.getParent()?.setOptions({ tabBarStyle: undefined, tabBarVisible: undefined });
    }, [navigation]);
}