PixelRatio

非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

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;

返回设备像素密度，典型值示例：

• PixelRatio.get() === 1

  • mdpi Android 设备

• PixelRatio.get() === 1.5

  • hdpi Android 设备

• 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()

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