PixelRatio

PixelRatio 可以获取到设备的像素密度和字体缩放比。

根据像素密度获取指定大小的图片
如果应用运行在一个高像素密度的设备上，显示的图片也应当分辨率更高。一个取得缩略图的好规则就是将显示尺寸乘以像素密度比：

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

译注: 这段代码的意思是，如果你要在屏幕上摆放一个宽 200 高 100 的图片，那么首先要准备多个分辨率尺寸的图。PixelRatio.getPixelSizeForLayoutSize(200)方法会根据当前设备的 pixelratio 返回对应值，比如当前设备的 pixelratio 为 2，则返回 200 * 2 = 400，最后生成的参数为{ width: 400, height: 200 }，然后开发者自己实现 getImage 方法，根据这一参数，返回最符合此尺寸的图片地址。

像素网格对齐

在 iOS 设备上，你可以给元素指定任意精度的坐标和尺寸，例如 29.674825。不过最终的物理屏幕上只会显示固定的坐标数。譬如 iPhone4 的分辨率是 640x960，而 iPhone6 是 750*1334。iOS 会试图尽可能忠实地显示你指定的坐标，所以它采用了一种把一个像素分散到多个像素里的做法来欺骗眼睛。但这个作用的负面影响是显示出来的元素看起来会有一些模糊。

在实践中，我们发现开发者们并不想要这个特性，反而需要去做一些额外的工作来确保坐标与像素坐标对齐，来避免元素显得模糊。在 React Native 中，我们会自动对齐坐标到像素坐标。

我们做这个对齐的时候必须十分小心。如果你同时使用已经对齐的值和没有对齐的值，就会很容易产生一些因为近似导致的累积错误。即使这样的累积错误只发生一次，后果也可能会很严重，因为很可能会导致一个像素宽的边框最终突然消失或者显示为两倍的宽度。

在 React Native 中，所有 JS 中的东西，包括布局引擎，都使用任意精度的数值。我们只在主线程最后设置原生组件的位置和坐标的时候才去做对齐工作。而且，对齐是相对于屏幕进行的，而非相对于父元素进行，进一步避免近似误差的累积。

---

实际案例演示：

import React from "react";
import { Image, PixelRatio, ScrollView, StyleSheet, Text, TextInput, View } from "react-native";
const size = 50;
const cat = {
  uri: "https://reactnative.dev/docs/assets/p_cat1.png",
  width: size,
  height: size
};
const App = () => (
  <ScrollView style={styles.scrollContainer}>
    <View style={styles.container}>
      <Text>Current Pixel Ratio is:</Text>
      <Text style={styles.value}>{PixelRatio.get()}</Text>
    </View>
    <View style={styles.container}>
      <Text>Current Font Scale is:</Text>
      <Text style={styles.value}>{PixelRatio.getFontScale()}</Text>
    </View>
    <View style={styles.container}>
      <Text>On this device images with a layout width of</Text>
      <Text style={styles.value}>{size} px</Text>
      <Image source={cat} />
    </View>
    <View style={styles.container}>
      <Text>require images with a pixel width of</Text>
      <Text style={styles.value}>
        {PixelRatio.getPixelSizeForLayoutSize(size)} px
      </Text>
      <Image
        source={cat}
        style={{
          width: PixelRatio.getPixelSizeForLayoutSize(size),
          height: PixelRatio.getPixelSizeForLayoutSize(size)
        }}
      />
    </View>
  </ScrollView>
);
const styles = StyleSheet.create({
  scrollContainer: {
    flext: 1,
    marginTop: "2em",
    justifyContent: "center",
  },
  container: {
    justifyContent: "center",
    alignItems: "center"
  },
  value: {
    fontSize: 24,
    marginBottom: 12,
    marginTop: 4
  }
});
export default App;

这段React Native代码实现了一个设备像素信息检测工具，其核心功能是动态获取并显示当前设备的像素密度和字体缩放比例，同时展示如何在不同像素密度下正确加载图片。代码通过PixelRatio模块获取设备关键参数，并通过ScrollView构建了一个可滚动的信息展示界面。

核心功能解析

代码主要围绕PixelRatio模块展开，该模块提供了多个关键方法：

• PixelRatio.get()：返回设备屏幕的像素密度比例（如2.0表示设备物理像素与CSS像素的比例为2:1）
• PixelRatio.getFontScale()：返回用户设置的字体缩放比例（如1.0表示100%缩放）
• PixelRatio.getPixelSizeForLayoutSize()：根据布局尺寸返回对应的物理像素尺寸

实现细节分析

界面由四个垂直排列的View组件构成，每个组件显示一组相关参数：

• 像素密度检测‌：显示当前设备像素比例和字体缩放比例
• 图片显示对比‌：
  • 上方图片使用布局尺寸（50px）直接加载
  • 下方图片使用getPixelSizeForLayoutSize()方法转换为物理像素后加载

技术要点

响应式设计‌：通过PixelRatio模块实现了跨设备适配，确保在不同像素密度的设备上都能正确显示元素尺寸
布局优化‌：

• 使用ScrollView确保内容在屏幕滚动
• 通过justifyContent和alignItems实现元素居中对齐
• 采用flex:1确保容器填满剩余空间
• 样式封装‌：通过StyleSheet.create方法集中管理所有样式，提高代码可维护性

这段代码演示了React Native中处理设备像素差异的最佳实践，特别适合需要精确控制元素尺寸的跨平台应用开发场景。通过这种方式可以确保应用在不同设备上都能获得一致的视觉体验。

需要我整理一份各像素密度设备的适配对照表吗？帮你快速换算不同屏幕尺寸下的图片像素值。

---

打包

接下来通过打包命令npn run harmony将reactNative的代码打包成为bundle，这样可以进行在开源鸿蒙OpenHarmony中进行使用。

最后运行效果图如下显示：

---

欢迎大家加入开源鸿蒙跨平台开发者社区，一起共建开源鸿蒙跨平台生态。