PixelRatio
PixelRatio
让你访问设备的像素密度和字体缩放比例。
获取正确尺寸的图片
如果你的设备具有较高的像素密度,你应该获取更高分辨率的图片。一个好的经验法则是将你显示的图片尺寸乘以像素比率。
const image = getImage({
width: PixelRatio.getPixelSizeForLayoutSize(200),
height: PixelRatio.getPixelSizeForLayoutSize(100),
});
<Image source={image} style={{width: 200, height: 100}} />;
像素网格对齐
在 iOS 中,你可以使用任意精度指定元素的位置和尺寸,例如 29.674825。但是,最终物理显示器只有固定数量的像素,例如 iPhone SE(第 1 代)为 640×1136,iPhone 11 为 828×1792。iOS 尝试尽可能忠实于用户值,方法是将一个原始像素扩展为多个像素来欺骗眼睛。这种技术的缺点是它会使生成的元素看起来模糊。
在实践中,我们发现开发者不想要此功能,他们必须通过手动舍入来解决它,以避免出现模糊的元素。在 React Native 中,我们自动舍入所有像素。
我们必须小心何时进行此舍入。你永远不想同时使用舍入值和未舍入值,因为你会累积舍入误差。即使只有一个舍入误差也是致命的,因为一像素边框可能会消失或变得两倍大。
在 React Native 中,JavaScript 和布局引擎中的所有内容都使用任意精度的数字。只有当我们在主线程上设置原生元素的位置和尺寸时,我们才会进行舍入。此外,舍入是相对于根元素而不是父元素完成的,同样是为了避免累积舍入误差。
示例
参考
方法
get()
static get(): number;
返回设备像素密度。一些示例
PixelRatio.get() === 1
PixelRatio.get() === 1.5
PixelRatio.get() === 2
- iPhone SE, 6S, 7, 8
- iPhone XR
- iPhone 11
- xhdpi Android 设备
PixelRatio.get() === 3
- iPhone 6S Plus, 7 Plus, 8 Plus
- iPhone X, XS, XS Max
- iPhone 11 Pro, 11 Pro Max
- Pixel, Pixel 2
- xxhdpi Android 设备
PixelRatio.get() === 3.5
- Nexus 6
- Pixel XL, Pixel 2 XL
- xxxhdpi Android 设备
getFontScale()
static getFontScale(): number;
返回字体大小的缩放因子。这是用于计算绝对字体大小的比率,因此任何严重依赖于此的元素都应使用它来进行计算。
- 在 Android 上,该值反映用户在设置 > 显示 > 字体大小中设置的偏好
- 在 iOS 上,该值反映用户在设置 > 显示与亮度 > 文本大小中设置的偏好,也可以在设置 > 辅助功能 > 显示与文本大小 > 更大文本中更新该值
如果未设置字体缩放比例,则此项返回设备像素比率。
getPixelSizeForLayoutSize()
static getPixelSizeForLayoutSize(layoutSize: number): number;
将布局尺寸 (dp) 转换为像素尺寸 (px)。
保证返回整数。
roundToNearestPixel()
static roundToNearestPixel(layoutSize: number): number;
将布局尺寸 (dp) 舍入到最接近的布局尺寸,该尺寸对应于整数个像素。例如,在像素比率为 3 的设备上,PixelRatio.roundToNearestPixel(8.4) = 8.33
,这正好对应于 (8.33 * 3) = 25 像素。