跳到主要内容

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）四舍五入到最接近的对应整数像素的布局尺寸。例如，在像素密度为 3 的设备上，PixelRatio率.roundToNearestPixel(8.4) = 8.33，这对应于正好 (8.33 * 3) = 25 像素。