react-native - React Native Web 中 Modal 的替代方案

Question

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

我尝试过位置“绝对”，顶部:0 和左侧:0 hack。这很有效，但如果在子组件中使用它，它将无法正常工作，因为按组件的顺序自动 zIndex。下图说明了此问题(请参阅蓝色按钮阻止下拉弹出窗口):



最终我发现 React 可以直接在根部渲染一个组件(在这个 link 中了解更多)，这意味着该组件将在其他组件之上渲染，但这是针对 React 而不是 React Native。

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

Answer 1

尝试将您的组件放在层次结构的最后。然后使用位置 'absolute', top: 0 和 left: 0 hack。它应该工作。

例如。

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

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