跳至主要内容

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;

返回设备像素密度。一些示例

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 个像素。