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

Question

我正在使用Dimensions.get('window').height获取窗口高度并在屏幕上呈现内容。但是，当启用全屏模式时，硬件按钮会隐藏，这导致屏幕上出现额外的空间。但是，Dimensions.get('window').height仍然会给出与之前相同的高度（当全屏模式被禁用时）。最终屏幕会多出一个空白区域。

在react-native中是否有一种方式可以根据全屏模式来呈现内容？

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

- ThinkAndCode

Answer 1

window和screen在Dimensions API中有所区别。

大部分情况下，Dimensions.get('window').height !== Dimensions.get('screen').height

这个Stack Overflow的答案很好地描述了它们之间的区别https://dev59.com/0lcP5IYBdhLWcg3wAmAE#44979327

简而言之

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

我认为您应该使用screen而不是window

或者在样式中尝试类似以下代码：

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

这样会覆盖整个屏幕

- Andrew

---

有没有办法知道软菜单栏是否已启用？ - ThinkAndCode

不在react-native中，你需要实现自己的本地模块。该模块公开了getSystemUiVisibility功能，允许您知道是否已设置SYSTEM_UI_FLAG_HIDE_NAVIGATION。如果它没有被设置，则软菜单栏将可见。使用Dimensions api的问题在于，在window上调用它将计算屏幕高度减去软菜单栏的高度。 - Andrew

以下依赖项可能有所帮助 https://github.com/Anthonyzou/react-native-full-screen https://github.com/Sunhat/react-native-extra-dimensions-android - Andrew

太棒了！这正是我在寻找的。请问包含 SYSTEM_UI_FLAG_HIDE_NAVIGATION 的文件名是什么？并且我能否通过 native 和 react-native 之间的桥接访问此属性？ - ThinkAndCode