React Native Web中Modal的替代方案

Question

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

我尝试过使用'absolute'定位、top: 0和left: 0的hack方法。这种方法效果很好，但是如果在子组件中使用它，由于组件按顺序自动设置zIndex，它将无法正常工作。下面的图片说明了这个问题（请注意，蓝色按钮阻塞了下拉弹出窗口）：

最终我发现React可以直接在根节点渲染组件(请查看此链接)，这意味着该组件将被渲染在其他组件之上，但这仅适用于React而不是React Native。

我想知道在React Native中是否有类似的功能。

- Voyage_Mystere

Answer 1

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

例如。

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

在RN中，较低的组件在渲染时具有更高的优先级。因此，您的组件应该覆盖component1和component2。

- atitpatel

---

这对于可访问性来说并不是很好。 - Evanss

Answer 2

使用'react-native-paper'中的模态框，这对我很有效

- kamal verma