Question

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

我尝试过'绝对'这个位置，顶部：0和左边：0黑客。这很有效但如果在子组件中使用它将无法正常工作，因为组件的顺序是auto zIndex。下图说明了此问题（请参阅蓝色按钮阻止下拉列表弹出）：

最终我发现React可以直接在根处渲染一个组件（在link处查找更多内容），这意味着该组件将呈现在其他组件之上，但这是针对React而不是React Native 。

我想知道React Native中是否有类似内容。

Answer 1

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

例如

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

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

Answer 2

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