React Native Web 中模态的替代方案

Question

React Native Web 中缺乏 Modal 促使我构建一个覆盖在当前视图之上的弹出组件。

我尝试过使用“绝对”位置、顶部：0 和左侧：0 黑客。这工作得很好，但如果在子组件中使用它，它将无法正常工作，因为自动 zIndex 按组件的顺序排列。下图说明了这个问题（请参阅蓝色按钮阻止下拉菜单弹出）：

最终我发现 React 可以直接在根处渲染组件（通过此链接了解更多信息），这意味着该组件将渲染在其他组件之上，但这是针对 React 而不是 React Native。

我想知道 React Native 中是否有类似的东西。

Answer 1

尝试将您的组件放在层次结构的最后。然后使用“绝对”位置，top: 0 和 left: 0 hack。它应该有效。

例如。

<View>
  {renderComponent1()}
  {renderComponent2()}
  {renderComponentWithAbsoluteStyling()} //Your component
</View>

在 RN 中，较低的组件在渲染时获得较高的优先级。所以你的组件应该覆盖组件1和组件2。