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 (第一代) 的 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 像素。