React Native - 模态覆盖

Question

Modal 1 -- Component 1
              |
           Component 2
              |
Modal 2 -- Component 3

我有一个像上面的“绘图”这样的场景，其中组件 3 在组件 2 中初始化，组件 2 在组件 1 中初始化。

组件 1 和 3 各包含一个带有模态的组件。

如果组件 3 的模态是打开的。 如果打开，组件 1 中的模态将隐藏在其后面。 但是，我希望它位于堆栈顶部和前视图中。

我尝试在代码中排序，并尝试使用 zIndex 和 position 绝对或相对。

{position: 'relative/absolute', overlay: {zIndex: 99}};

但似乎都不起作用。

我查看了类似的帖子，但找不到有效的答案。

如果从堆栈中的“更高”组件打开其他模式，我如何强制模式 1 始终可见

Answer 1

您可以使用模态组件或其他一些模块。

但是如果你想创建自己的模态，你可以遵循这个模式。

在您的主组件 App 中，有 2 个子组件

<App>
  <Home /> //All components/navigation are here
  {
    isModalOpen && <Modal />
  }
</App>

将模态样式设置为 position:absolute, left: 0, right: 0, top: 0, bottom: 0