PixelRatio 像素密度

React-Native 中,访问设备像素密度的方法由 PixelRatio 类提供。

我们的应用通常都会运行在不同的设备上,并且这些设备的像素密度很有可能各不相同。这会造成一个现象就是:

  • 定义了元素的边框为 1像素,而实际上在不同像素密度的设备上结果不一样,比如:iPhone6 显示为 2像素,iPhone6 Plus 显示为 3像素
  • 对于一个图片来讲,因为设备的像素密度不同,它也需要对应不同尺寸的规则,以防止图片过小变得模糊;

根据像素密度指定边框厚度

出于对产品体验的一致性,我们会要求不论是在哪种设备上,其边框厚度都应该是相同的。一个取得物理上的相同边框厚度的好方法就是用逻辑尺寸除以像素密度比:

  1. var styles = StyleSheet.create({
  2. box: {
  3. borderWidth: 1 / PixelRatio.get(),
  4. borderStyle: solid
  5. }
  6. });

上述代码将保证你的应用在所有的设备上(像素密度),都获得 1像素 的边框厚度。PixelRatio 通过 get() 方法来返回设备的像素密度。

未完待续。。。