PixelRatio
PixelRatio
PixelRatio类允许访问设备像素密度。
获取正确大小的图像
如果您使用的是高像素密度设备,则应该获得更高分辨率的图像。一个好的经验法则是将您显示的图像的大小乘以像素比率。
var image = getImage{
width: PixelRatio.getPixelSizeForLayoutSize(200),
height: PixelRatio.getPixelSizeForLayoutSize(100),
}
<Image source={image} style={{width: 200, height: 100}} />
像素网格贴紧
在iOS中,您可以为任意精度的元素指定位置和尺寸,例如29.674825。但是,最终物理显示屏只有固定的像素数量,例如iPhone 4的640×960或iPhone 6的750×1334。iOS会尽量忠实于用户的价值,将一个原始像素分散为多个像素欺骗眼睛。这种技术的不足之处在于它使得生成的元素看起来模糊。
在实践中,我们发现开发人员不希望使用此功能,他们必须通过手动舍入来解决此问题,以避免出现模糊元素。在React Native中,我们会自动四舍五入所有像素。
我们必须小心谨慎。你不想在积累舍入误差的同时使用四舍五入的值。即使有一个舍入误差也是致命的,因为一个像素边界可能会消失或是两倍大。
在React Native中,JavaScript中和布局引擎中的所有内容都可以使用任意精度数字。只有当我们在主线程上设置本地元素的位置和尺寸时,此外,舍入是相对于根而不是父亲完成的,以避免累积舍入错误。
Methods
static get()
返回设备像素密度。一些例子:
- PixelRatio.get() === 1
static getFontScale()
返回字体大小的缩放因子。这是用来计算绝对字体大小的比率,所以任何严重依赖于它的元素都应该使用它来进行计算。
如果未设置字体比例,则返回设备像素比率。
目前这只在Android上实现,并反映在设置>显示>字体大小中设置的用户偏好,在iOS上它将始终返回默认的像素比例。@platform android
static getPixelSizeForLayoutSize(layoutSize)
将布局大小(dp)转换为像素大小(px)。
保证返回一个整数。
static roundToNearestPixel(layoutSize)
将布局大小(dp)舍入为与整数个像素对应的最近布局大小。例如,在PixelRatio为3的设备上PixelRatio.roundToNearestPixel(8.4) = 8.33
,它恰好对应于(8.33 * 3)= 25像素。
static startDetecting()
// iOS没有运行,但在网络上使用。不应该记录。