react-navigation - 使用抽屉 + 选项卡 + 堆栈在屏幕上隐藏 tabBar

Question

我想在某些屏幕中隐藏标签栏，更准确地说是在每个标签的主屏幕之后的屏幕中。

我正在使用 reac navigation 5 React native with hooks

我有以下布局，我正在使用抽屉、选项卡和堆栈。

我希望标签栏在用户停在购物车标签时正常显示，但是当用户单击将他带到购物车堆栈的另一个屏幕的按钮时，我希望标签栏不再可见。

也就是说，仅在选项卡的主屏幕中，选项卡栏存在，在其他屏幕中，它不应该存在。

这种行为对 Home 来说是令人满意的，但在其他选项卡中却不是。

我非常感谢任何帮助，我收到评论、建议以及任何使此导航分布更好的东西。

标签： react-navigationreact-native-navigationreact-navigation-v5

Answer 1

我通过以下方式在我的应用程序中完成了此操作：

  import { useFocusEffect } from '@react-navigation/native';

  { ... }

  // Hide parent tab bar on focus
  useFocusEffect(
    useCallback(() => {
      // Do something when the screen is focused
      const parent = dangerouslyGetParent();
      if (parent) {
        parent.setOptions({
          tabBarVisible: false,
        });
      }

      return () => {

      };
    }, [dangerouslyGetParent]),
  );

不过要小心。为了在使用navigation.pop()或导航回到前一个屏幕时真正起作用，您需要将相同的代码添加到您要确保显示标签栏的组件中，因为这会修改导航器配置本身。因此，您只需在使用上述代码子从禁用的标签栏屏幕导航到的屏幕中执行相同操作tabBarVisible: true

我在挖掘时还没有真正找到更好的研究方法。会喜欢其他更优雅的解决方案，但这至少会让你开始工作并且功能正常。