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

Question

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

我正在使用 reac 导航 5 用钩子反应原生

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

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

也就是说，只有在标签的主屏幕中，标签栏存在，在其他屏幕中，它不应该。

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

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

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

从禁用的标签栏屏幕导航到的屏幕中执行相同操作

我在挖掘时还没有真正找到更好的研究方法。会喜欢其他更优雅的解决方案，但这至少可以帮助您入门并且功能正常。