当前位置：首页 > news >正文

0 基础入门React Native鸿蒙跨平台开发：PixelRatio 可以获取到设备的像素密度和字体缩放比

news 2026/7/12 15:41:45

PixelRatio

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

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

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

实际案例演示：

importReactfrom"react";import{Image,PixelRatio,ScrollView,StyleSheet,Text,TextInput,View}from"react-native";constsize=50;constcat={uri:"https://reactnative.dev/docs/assets/p_cat1.png",width:size,height:size};constApp=()=>(<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>Onthisdevice imageswitha layout widthof</Text><Text style={styles.value}>{size}px</Text><Image source={cat}/></View><View style={styles.container}><Text>require imageswitha pixel widthof</Text><Text style={styles.value}>{PixelRatio.getPixelSizeForLayoutSize(size)}px</Text><Image source={cat}style={{width:PixelRatio.getPixelSizeForLayoutSize(size),height:PixelRatio.getPixelSizeForLayoutSize(size)}}/></View></ScrollView>);conststyles=StyleSheet.create({scrollContainer:{flext:1,marginTop:"2em",justifyContent:"center",},container:{justifyContent:"center",alignItems:"center"},value:{fontSize:24,marginBottom:12,marginTop:4}});exportdefaultApp;