跳到主要内容

PixelRatio

PixelRatio 允许你访问设备的像素密度和字体缩放比例。

获取正确尺寸的图片​

如果你的设备具有高像素密度，你应该获取更高分辨率的图片。一个好的经验法则是将你显示的图片尺寸乘以像素比。

tsx
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()​

tsx
static get(): number;

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

getFontScale()​

tsx
static getFontScale(): number;

返回字体大小的缩放因子。这是用于计算绝对字体大小的比例，因此任何严重依赖此比例的元素都应使用此比例进行计算。

  • 在 Android 上，该值反映用户在**设置 > 显示 > 字体大小**中设置的偏好。
  • 在 iOS 上，该值反映用户在**设置 > 显示与亮度 > 文字大小**中设置的偏好，该值也可以在**设置 > 辅助功能 > 显示与文字大小 > 更大字体**中更新。

如果未设置字体缩放比例，则返回设备的像素比。

getPixelSizeForLayoutSize()​

tsx
static getPixelSizeForLayoutSize(layoutSize: number): number;

将布局尺寸 (dp) 转换为像素尺寸 (px)。

保证返回一个整数。

roundToNearestPixel()​

tsx
static roundToNearestPixel(layoutSize: number): number;

将布局尺寸 (dp) 取整到最接近的、对应整数像素数量的布局尺寸。例如，在 PixelRatio 为 3 的设备上，PixelRatio.roundToNearestPixel(8.4) = 8.33，这正好对应 (8.33 * 3) = 25 像素。