React-Native：启用“全屏模式”时如何获取设备的完整高度？

Question

我正在使用Window来达到Dimensions.get('window').height的高度，并在屏幕上呈现内容。但是，启用Full Screen Mode后，硬件按钮将被隐藏，这会导致屏幕上有额外的空间。但是Dimensions.get('window').height的高度仍然与以前一样（禁用Full Screen Mode时）。最终，屏幕最终会留下多余的空间。

react-native中是否可以根据Full Screen Mode呈现内容？

而且，启用“全屏模式”时如何获取设备的完整高度？

Answer 1

Dimensions API中的window和screen之间有区别。

大部分 Dimensions.get('window').height !== Dimensions.get('screen').height

这个SO答案在描述差异方面做得很好 https://stackoverflow.com/a/44979327/5508175

tl; dr

• window：不使用软菜单栏报告宽度/高度
• screen：报告整个屏幕的宽度/高度

我认为您想使用screen而不是window

或者，您可以在样式中尝试类似

{ top: 0, bottom: 0, left: 0, right: 0 }

它应该覆盖整个屏幕

Answer 2

对我有用：

html, body, #app, #app>div {
  height: 100%
}