如何在 react-native/expo 中使用 Dimensions 获得真实的屏幕分辨率并设置应用程序样式?

问题描述

我正在开发一个 react-native/expo 应用程序。 昨天我到了造型阶段并了解到

Dimensions.get('window').width

返回我的设备(一个 android,一个 iPad)实际宽度的一半,但返回模拟 android 设备的实际宽度。 看起来物理设备以某种半/半分辨率模式运行应用程序。

说它完全破坏了我为应用程序设计样式的想法,因为我使用 EStyleSheet(react-native-extended-stylesheet)动态样式构建,这取决于 Dimensions 获得的值以及 ma​​xWidth 之类的东西没有多大意义,是吗?

是否有任何方法可以强制 react-native/expo 应用以“全分辨率”运行?

谢谢!

解决方法

如果您想知道为什么在设备的屏幕分辨率为 1080p 的情况下会得到类似 420 的宽度,那么答案是 React Native 使用与密度无关的像素作为测量单位。 Dimensions api 还返回基于密度的独立像素值,而不是屏幕分辨率。

您唯一应该担心的是状态栏和导航栏。 您可以阅读这些答案以获得明确的答案:

(React Native 也不希望你再使用 Dimensions api。你可以使用 useWindowDimensions 因为它会在屏幕旋转等时发生变化)

Height and Width - React Native Docs

Pixel density

Android Navigation Bar height React-Native

Get screen DPI in react native

useWindowDimensions - React Native Docs