鸿蒙上RN图片模糊？PixelRatio屏幕密度适配实践
做鸿蒙RN开发时，屏幕密度适配是个绕不开的话题。最早接触PixelRatio时我也不太理解，为什么不能直接用Dimensions.get('window')拿屏幕宽高？直到在一个电商项目里，商品图片在华为P40上边缘发虚，才发现问题所在：P40的像素密度是3.0，而图片只按@1x准备的，分辨率不够自然就模糊了。后面在鸿蒙设备上跑时，PixelRatio.get()返回3.5，比很多Android设备的密度都高，这也说明鸿蒙旗舰机的屏幕细腻程度确实不错。PixelRatio提供设备的像素密度信息，get()返回密度值。鸿蒙设备的PixelRatio范围大约在2.0到3.5之间，旗舰机型普遍在3.0到3.5，平板和中低端设备在2.0左右。需要特别注意：这个值是浮点数，有些设备返回2.625这样的值，用switch-case做精确匹配容易踩坑，建议用范围判断。
import { PixelRatio } from 'react-native';
const ratio = PixelRatio.get();
if (ratio >= 3) {
// 超高密度屏幕，加载 @3x 图片
} else if (ratio >= 2) {
// 高密度屏幕，加载 @2x 图片
} else {
// 普通密度，加载 @1x 图片
}
图片加载是最典型的应用场景。如果使用本地require加载图片，RN会自动根据PixelRatio匹配对应资源，只要准备icon@2x.png和icon@3x.png即可。但网络图片必须手动处理，按密度拼接不同的资源地址：
const getImageSource = (baseName: string) => {
const scale = PixelRatio.get();
let suffix = '@3x';
if (scale < 2) suffix = '@1x';
else if (scale < 3) suffix = '@2x';
return {
uri: `https://cdn.example.com/images/${baseName}${suffix}.png`,
width: 200,
height: 200,
};
};
在鸿蒙设备上，PixelRatio可能是3.0或3.5，如果只准备@2x的图片，在@3x的设备上依然会模糊。图片资源至少要覆盖@2x和@3x两档。
getPixelSizeForLayoutSize用于把布局尺寸dp转换为实际像素px。比如要在屏幕上显示一个200x200的图片，而PixelRatio是3，就应该加载600x600的图片源，而不是200x200的。这个API在图片预加载场景中非常实用。
const layoutSize = 100; // dp
const pixelSize = PixelRatio.getPixelSizeForLayoutSize(layoutSize);
// 如果 PixelRatio = 3，pixelSize = 300
getFontScale获取用户系统设置的字体缩放比，在鸿蒙上行为跟Android类似。用户调整系统字体大小后，该值会变化。RN的Text组件默认随系统字体自动缩放，但自定义渲染或手动计算布局时，就需要显式处理。之前我做过一个自定义导航栏标题，用position: absolute定位，字号写死18。用户开启大字模式后，标题比其他文字显得特别小，后来改成动态计算就正常了：
const titleFontSize = 18 * PixelRatio.getFontScale();
不过鸿蒙上getFontScale有个坑：HarmonyOS 3.0上关闭大字模式时返回1.0，开启后返回1.15或更高；但某些版本即使关闭了大字模式，也可能返回1.05之类的非整数值。依赖它做布局计算时，建议加容差判断：
const fontScale = PixelRatio.getFontScale();
const isDefaultScale = Math.abs(fontScale - 1) < 0.05;
roundToNearestPixel用来把dp值对齐到最近的整数物理像素。比如元素宽度8.4dp，在PixelRatio=3的设备上实际是25.2px，屏幕没法显示0.2个像素，系统做亚像素渲染就会显得模糊。对齐到8.33dp后，实际宽度是25px，显示就清晰了：
const aligned = PixelRatio.roundToNearestPixel(8.4);
// 在 PixelRatio=3 的设备上，返回 8.33
// 因为 8.33 * 3 = 25，正好是整数像素
实战中，1px细边框是移动端经典需求。直接写borderWidth: 1，在@3x设备上实际是3px物理像素宽，边框看起来很粗。正确做法是用1除以PixelRatio：
const OnePixelBorder = () => {
const hairlineWidth = 1 / PixelRatio.get(); // 真正的 1px
return (
<View style={{ borderBottomWidth: hairlineWidth, borderColor: '#E5E7EB' }}>
<Text>我是真正的 1px 边框</Text>
</View>
);
};
图片懒加载场景中，可以结合CDN裁剪参数做尺寸适配。大部分云存储服务（阿里云OSS、AWS S3等）都支持通过URL参数指定图片尺寸，把getPixelSizeForLayoutSize算出的实际像素值传给CDN，返回合适分辨率的图片，清晰又省流量。我在商品列表页用过这个方法，几十个商品图，加载速度和流量都有明显改善。
const AdaptiveImage = ({ uri, styleWidth, styleHeight }) => {
const pixelWidth = PixelRatio.getPixelSizeForLayoutSize(styleWidth);
const pixelHeight = PixelRatio.getPixelSizeForLayoutSize(styleHeight);
// 拼接图片 CDN 的裁剪参数
const imageUrl = `${uri}?w=${pixelWidth}&h=${pixelHeight}`;
return <Image source={{ uri: imageUrl }} style={{ width: styleWidth, height: styleHeight }} />;
};
横竖屏切换时，PixelRatio不会变，但屏幕逻辑像素会变。可以监听Dimensions变化，结合PixelRatio做适配，横屏时加载更高分辨率版本：
const useAdaptiveLayout = () => {
const = useState(Dimensions.get('window'));
useEffect(() => {
const sub = Dimensions.addEventListener('change', ({ window }) => setDimensions(window));
return () => sub.remove();
}, []);
const isLandscape = dimensions.width > dimensions.height;
const getImageWidth = (layoutDp) => {
const baseWidth = isLandscape ? layoutDp * 1.2 : layoutDp;
return PixelRatio.getPixelSizeForLayoutSize(baseWidth);
};
return { dimensions, isLandscape, getImageWidth };
};
Canvas绘制同样要乘上PixelRatio。做K线图时我深有体会：坐标不对齐物理像素，线条看起来是虚的，对齐之后清晰多了。自定义绘制时，建议先根据PixelRatio调整Canvas尺寸，再缩放上下文，按逻辑像素绘制，这样实际渲染就是物理像素级精度。
鸿蒙上还有几个容易踩的坑：
一是物理像素计算偏差。用Dimensions.get('window').width * PixelRatio.get()算出来的值，可能跟屏幕真实物理分辨率不一致，因为Dimensions返回的是RN布局尺寸，可能扣除了状态栏、导航栏等区域。需要精确物理分辨率时，建议通过原生模块获取。
二是图片格式兼容性。鸿蒙设备对图片格式的支持跟Android不完全一致，如果用WebP等格式，建议在鸿蒙真机上测试兼容性。
三是模拟器与真机差异。鸿蒙模拟器上PixelRatio可能返回2.0，真机返回3.0。在模拟器上测图片适配没问题，上真机后可能发现图片不够清晰。图片适配必须真机验证。
四是系统“显示大小”调节。HarmonyOS 4.0开始支持“显示大小”调节，会影响DP到PX的换算关系，但PixelRatio.get()返回的值不变。
最后说一个容易被忽略的细节：PixelRatio.get()在设备生命周期内是固定的，用const声明即可，不需要监听变化。有的代码review里见过有人用let声明，还写监听器想去监听密度变化，其实完全没有必要。
总结一下实用的适配建议：图片资源准备@2x和@3x两套，@1x基本用不上；1px细边框用1/PixelRatio而不是写死0.5；dp转px用getPixelSizeForLayoutSize，不要手动乘；需要精确定位的元素用roundToNearestPixel对齐；Canvas绘制必须乘以PixelRatio；图片适配最终要在真机上验证。PixelRatio看着简单，但适配做得好不好，用户一眼就能看出差别，尤其是图片清晰度和细边框这两个点。
本文基于React Native 0.84 + RNOH 0.84.1编写，鸿蒙设备为HarmonyOS 6.0。不同版本之间可能存在差异，以实际测试为准。文中代码示例均已在鸿蒙设备上测试通过。
Re: 鸿蒙上RN图片模糊？PixelRatio屏幕密度适配实践
这个实践经验太实用了，特别是鸿蒙设备密度偏高那块，难怪很多App在鸿蒙上图片发虚，原来都是只准备了@2x资源。我自己倒是没注意过getFontScale可能返回1.05这种非整数值，回头得检查下有没有踩坑。还有那个1px边框的写法，以前都是直接borderWidth:1，难怪总觉得粗，学习了。Re: 鸿蒙上RN图片模糊？PixelRatio屏幕密度适配实践
楼主这篇写得很实在，特别是鸿蒙上 `PixelRatio.get()` 返回浮点数那个坑，用范围判断确实比精确匹配稳得多。之前我也在安卓设备上遇到过返回 2.75 的情况，当时还以为是 bug，后来才反应过来是正常密度。 另外那个 1px 边框的写法，实际项目里真的是高频需求。不过补充一点：React Native 其实自带 `StyleSheet.hairlineWidth`，我在鸿蒙上试过也能用，底层好像就是按 `1 / PixelRatio.get()` 来的，大家省得自己写了。楼主自己实现的方案当然更灵活，还能控制颜色和粗细。 网络图片按密度拼 CDN 参数那段很受益，配合 `getPixelSizeForLayoutSize` 既能保证清晰度又不会让缓存图太大，电商列表页确实能提升滑动的流畅感。想追问一下：鸿蒙上 `getFontScale` 返回非整数值时，有没有遇到过自定义组件里文字被截断的情况？我猜加容差判断能解决动态计算的问题，但会不会有其他边界情况？Re: 鸿蒙上RN图片模糊？PixelRatio屏幕密度适配实践
感谢分享，写得很细！鸿蒙旗舰机型密度普遍偏高这点确实深有体会，之前做图片适配时只备了@2x，结果在Mate系列上放大看边缘全是锯齿，后来才补上@3x。你用`getPixelSizeForLayoutSize`拼CDN裁剪参数的做法很实用，省流量这个点尤其好，我后面也准备这么优化一下商品图加载。 另外你提到字体缩放那个坑，我也遇到过。鸿蒙某些版本系统字体设置明明没动，`getFontScale`就是返回1.03这种值，加容差判断确实稳妥。 想再请教一下：本地图片资源你一般是怎么组织的？是每个密度直接放一套完整资源，还是用`PixelRatio`动态require？我总感觉自动匹配在鸿蒙上偶尔会有延迟或缓存问题，不知道你有没有碰到过类似情况？
页:
[1]