如何在本机反应中隐藏特定屏幕上的底部导航栏？

Posted 2023-02-16

【中文标题】如何在本机反应中隐藏特定屏幕上的底部导航栏？

【英文标题】：How to hide bottom navigation bar on a specific screen in react native?

【发布时间】：2019-11-06 19:26:41

【问题描述】：

我正在使用 React Native 和 React Native Navigation 来构建我的应用程序。目前，我有三个底部标签：主页、上传视频和消息。选择“上传视频”选项卡后，我想渲染“上传视频”组件并仅在该屏幕上隐藏底部选项卡，并显示带有“取消”（将它们带回 HomeView）和“发布”按钮的标题（这有已经完成）。我很难在这个特定屏幕上隐藏标签栏。

我尝试按照这里的代码 (How can I hide the bottom tab bar on a specific screen (react-navigation 3.x));但是，这最终没有成功，我无法以这种方式隐藏任何屏幕上的底部选项卡。

目前，我将此作为我的底部导航器：

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

任何见解都会非常有帮助，谢谢。

【参考方案1】：

由于provided solution by the docs 根本没有工作，我以前所未有的方式遍历互联网以找到解决此问题的方法。

我有以下导航设置：

底部标签 A (NativeStack) 1（屏幕） 2（屏幕） 3（屏幕） B (NativeStack) C (NativeStack)

我想在屏幕 1 中隐藏底部栏。最后的诀窍是在相应屏幕中的以下 sn-p：

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

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

愿这能让你们摆脱我不得不经历的绝望。

【参考方案2】：

在 React 导航 5+ 中，我使用以下方法在特定屏幕上隐藏标签栏，该屏幕位于标签屏幕的堆栈导航器内。在包含文件的选项卡导航器中，我创建了一个函数，然后使用将动态触发的函数设置选项属性。

function getIsTabBarShown(route) 
    const routeName = getFocusedRouteNameFromRoute(route) ?? routes.DASHBOARD;

    switch (routeName) 
        case routes.MEMBERDETAILS:
            return false;
        default:
            return true;
    

当用户进入 MemberNavigator Stack 中的 MemberDetails 页面时，此函数将返回 false。

<Tab.Screen 
    name="MemberTab"
    component=MemberNavigator
    options=( route ) => (
        title: 'Members',
        tabBarVisible: getIsTabBarShown(route),
        tabBarIcon: ( color, size ) =>
        <MaterialCommunityIcons name="account-group" color=color 
   size=size />
) />

这里是官方文档了解更多click here。

【参考方案3】：

就在你想隐藏栏的屏幕上，设置tabBarVisible: false。

<Tab.Screen
    name="SignIn"
    component=SignInScreen
    options=
      tabBarVisible: false, //like this
      tabBarButton: (props) => null, //this is additional if you want to hide the tab element from the bottom nav
    
  />

【参考方案4】：

在 v5 上，您可以使用函数和默认 arg 导航来修改选项。：

<BottomTab.Screen
      name="Explore"
      component=Explore
      options=( navigation ) => 
        const  routes, index  = navigation.dangerouslyGetState();
        const  state: exploreState  = routes[index];
        let tabBarVisible = true;
        if (exploreState) 
          const  routes: exploreRoutes, index: exploreIndex  = exploreState;
          const exploreActiveRoute = exploreRoutes[exploreIndex];
          if (exploreActiveRoute.name === "RewardDetail") tabBarVisible = false;
        
        return 
          tabBarVisible,
          title: "Explore",
          tabBarLabel: "Explore",
          tabBarIcon: ( color, size ) => (
            <AntDesign name="search1" color=color size=size />
          ),
        ;
      
    />

看我的回答：https://***.com/a/64042879/5288560

【参考方案5】：

由于现在使用的是 react-navigation 5，所以上面的解决方案不再起作用了。

对于 React-Navigation 5，请参考this link。

【参考方案6】：

您需要为每个需要隐藏标签栏的TabBar屏幕或堆栈指定，

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

【讨论】：

我们可以在 HomeView 中隐藏它吗？