React Native Web 中 Modal 的替代方案

Posted 2023-03-14

【中文标题】React Native Web 中 Modal 的替代方案

【英文标题】：Alternative for Modal in React Native Web

【发布时间】：2018-01-10 06:39:11

【问题描述】：

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

我尝试过使用“绝对”位置，顶部：0 和左侧：0 hack。这很好用，但如果在子组件中使用它就不能正常工作，因为组件的顺序是自动 zIndex。下图说明了这个问题（请参阅蓝色按钮阻止下拉弹出窗口）：

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

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

【参考方案1】：

尝试将您的组件放在层次结构的最后。然后使用位置“绝对”，顶部：0 和左侧：0 hack。它应该可以工作。

例如。

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

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

【讨论】：

这对可访问性来说不是很好。

【参考方案2】：

使用“react-native-paper”中的模态，它对我有用