Skip to main content

PixelRatio

PixelRatio 使你可以访问设备的像素密度和字体比例。

¥PixelRatio gives you access to the device's pixel density and font scale.

获取正确大小的图片​

¥Fetching a correctly sized image

如果你使用的是高像素密度设备，你应该会获得更高分辨率的图片。一个好的经验法则是将显示图片的大小乘以像素比。

¥You should get a higher resolution image if you are on a high pixel density device. A good rule of thumb is to multiply the size of the image you display by the pixel ratio.

const image = getImage({
  width: PixelRatio.getPixelSizeForLayoutSize(200),
  height: PixelRatio.getPixelSizeForLayoutSize(100),
});
<Image source={image} style={{width: 200, height: 100}} />;

像素网格捕捉​

¥Pixel grid snapping

在 iOS 中，你可以以任意精度指定元素的位置和尺寸，例如 29.674825。但是，最终物理显示屏只有固定数量的像素，例如 iPhone SE（第一代）的 640×1136 或 iPhone 11 的 828×1792。iOS 试图通过将一个原始像素分散到多个像素来欺骗眼睛，从而尽可能忠实于用户价值。这种技术的缺点是它使生成的元素看起来模糊。

¥In iOS, you can specify positions and dimensions for elements with arbitrary precision, for example 29.674825. But, ultimately the physical display only have a fixed number of pixels, for example 640×1136 for iPhone SE (1st generation) or 828×1792 for iPhone 11. iOS tries to be as faithful as possible to the user value by spreading one original pixel into multiple ones to trick the eye. The downside of this technique is that it makes the resulting element look blurry.

在实践中，我们发现开发者不想要此功能，他们必须通过手动舍入来解决此问题，以避免元素模糊。在 React Native 中，我们自动舍入所有像素。

¥In practice, we found out that developers do not want this feature and they have to work around it by doing manual rounding in order to avoid having blurry elements. In React Native, we are rounding all the pixels automatically.

我们必须小心何时进行舍入。你永远不想同时使用舍入和未舍入的值，因为这样会累积舍入误差。即使有一个舍入误差也是致命的，因为一个像素的边框可能会消失或变大一倍。

¥We have to be careful when to do this rounding. You never want to work with rounded and unrounded values at the same time as you're going to accumulate rounding errors. Having even one rounding error is deadly because a one pixel border may vanish or be twice as big.

在 React Native 中，JavaScript 中和布局引擎中的所有内容都可以使用任意精度数字。只有当我们在主线程上设置原生元素的位置和尺寸时，我们才会进行舍入。此外，舍入是相对于根而不是父项进行的，同样是为了避免累积舍入误差。

¥In React Native, everything in JavaScript and within the layout engine works with arbitrary precision numbers. It's only when we set the position and dimensions of the native element on the main thread that we round. Also, rounding is done relative to the root rather than the parent, again to avoid accumulating rounding errors.

示例​

¥Example

参考

¥Reference

方法​

¥Methods

get()​

static get(): number;

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

¥Returns the device pixel density. Some examples:

getFontScale()​

static getFontScale(): number;

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

¥Returns the scaling factor for font sizes. This is the ratio that is used to calculate the absolute font size, so any elements that heavily depend on that should use this to do calculations.

  • Android 上的值反映了在“设置”>“显示”>“字体大小”中设置的用户首选项

    ¥on Android value reflects the user preference set in Settings > Display > Font size

  • 在 iOS 上，值反映了在“设置”>“显示和亮度”>“文本大小”中设置的用户首选项，也可以在“设置”>“辅助功能”>“显示和文本大小”>“较大文本”中更新值

    ¥on iOS value reflects the user preference set in Settings > Display & Brightness > Text Size, value can also be updated in Settings > Accessibility > Display & Text Size > Larger Text

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

¥If a font scale is not set, this returns the device pixel ratio.

getPixelSizeForLayoutSize()​

static getPixelSizeForLayoutSize(layoutSize: number): number;

将布局大小 (dp) 转换为像素大小 (px)。

¥Converts a layout size (dp) to pixel size (px).

保证返回一个整数。

¥Guaranteed to return an integer number.

roundToNearestPixel()​

static roundToNearestPixel(layoutSize: number): number;

将布局大小 (dp) 舍入为与整数像素对应的最接近的布局大小。例如，在 PixelRatio 为 3 的设备上，PixelRatio.roundToNearestPixel(8.4) = 8.33 恰好对应于 (8.33 * 3) = 25 像素。

¥Rounds a layout size (dp) to the nearest layout size that corresponds to an integer number of pixels. For example, on a device with a PixelRatio of 3, PixelRatio.roundToNearestPixel(8.4) = 8.33, which corresponds to exactly (8.33 * 3) = 25 pixels.