组件的显示屏覆盖

Question

我正在编写一个React Native可重用组件，该组件在某种状态下需要在屏幕上显示一个覆盖图。似乎执行此操作的方法是使用position:absolute。但这在我的情况下效果不佳，因为该组件不是根视图的子级，因此无法获得整个屏幕区域。

在Snack上查看此演示示例： https://snack.expo.io/@dennismadsen/position-absolute-test

在这种情况下，该位置是根据AssetExample元素的位置获得的。

上面的示例如下：

我希望这样将叠加层放置在屏幕顶部：

我该如何解决？

Answer 1

也许可以从“尺寸”中获取宽度和高度？这样一来，您将永远获得100％

从'react-native'导入{.....，Dimensions，....};

const width = Dimensions.get（'window'）。width; const height = Dimensions.get（'window'）。height;

Answer 2

我也遇到同样的问题。我已经在其中放置了DatePicker的地方创建了ListItem输入字段。

Answer 3

我通过使用react-native-elements中的Overlay解决了这个问题。