React Navigation V5 在特定屏幕中隐藏底部选项卡

Question

我正在使用 React Navigation 版本 5 创建一个 React Native 应用程序，我有一个底部选项卡导航器，其中一个堆栈导航器嵌套在选项卡导航器的每个屏幕内。我只希望底部标签栏显示在每个堆栈导航器的第一页上。这是一个显示我的应用程序基本导航功能的小吃：https : //snack.expo.io/@brforest/hide-tab-1。根据底部选项卡文档，有一个 tabBarVisible 选项属性，但是：

隐藏标签栏会导致故障和跳跃行为。我们建议改用堆栈导航器内的选项卡导航器。

在堆栈导航器中嵌套选项卡导航器的指南在这里。我尝试使用这种方法，但如果我只有一个堆栈导航器，我只能让它工作，但我需要为每个选项卡屏幕都有一个堆栈导航器。这是我（未成功）尝试在上一个小吃的同一应用程序上使用此方法：https : //snack.expo.io/@brforest/hide-tab-2。在此，我在单个堆栈导航器中嵌套了多个选项卡导航器，以尝试推断文档中建议的方法。正如您在本小吃中看到的，堆栈中的导航不再起作用，但选项卡仍然起作用。

对我来说，将堆栈导航器嵌套在选项卡导航器中（就像我在第一个小吃中那样）比尝试将相同的选项卡导航器嵌套在大型堆栈导航器中更有意义。但是，我想遵循文档并找到一种不会导致“故障和跳跃行为”的方法。关于如何实现我想要的导航功能的任何建议？

谢谢！

Answer 1

通过互联网后，我找到了自己的方法来隐藏特定堆栈屏幕中的底部选项卡。

export default function SignStack({ navigation, route }) {

   useEffect(() => {
    if (route.state?.index) {
      navigation.setOptions({
        tabBarVisible: false,
      });
    } else {
      navigation.setOptions({
        tabBarVisible: true,
      });
    }
  }, [navigation, route.state?.index]);



return <Stack.Navigator> ... </Stack.Navigator>

}

这将仅显示第一个堆栈屏幕上的底部选项卡。

2020 年 11 月 17 日更新

隐藏使用底部选项卡getFocusedRouteNameFromRoute，该实施例示出了底部标签仅在Auth与Settings屏幕。

  const routeName = getFocusedRouteNameFromRoute(route) ?? 'Auth';

  useEffect(() => {
    navigation.setOptions({
      tabBarVisible: ['Auth', 'Settings'].includes(routeName),
    });
  }, [navigation, routeName]);

为什么不先解决TLDR

以上解决方案根据渲染隐藏屏幕上的底部选项卡route.state.index如果您有平行导航路线，则可以使用上述解决方案。

假设您有两个选项卡导航用户堆栈和主页堆栈，并且在用户堆栈上您有两个屏幕配置文件和设置，如果您想隐藏设置屏幕上的底栏，您将使用上述解决方案，但当您导航时直接从主页到用户设置屏幕，然后底部标签栏显示在设置屏幕上并隐藏在配置文件屏幕上，这是因为route.state.index设置屏幕0和配置文件屏幕是1。