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

Question

我正在使用 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
    }
});

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

Answer 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 的方法解决了这个问题。该调用是在清理时进行的，这意味着它会在卸载屏幕后立即运行。

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

Answer 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。

Answer 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
    }}
  />

Answer 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://stackoverflow.com/a/64042879/5288560

Answer 5

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

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

Answer 6

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

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