《React-Native系列》12、 API模块之PixelRatio和Dimensions

最新推荐文章于 2022-04-01 13:02:42 发布

coder_小刀

最新推荐文章于 2022-04-01 13:02:42 发布

阅读量6.9k

点赞数 2

分类专栏： ReactNative ReactNative实战系列文章标签： ReactNative

本文链接：https://blog.csdn.net/codetomylaw/article/details/52201875

版权

PixelRatio和Dimensions 是ReactNative提供的API，这个在我们编写RN页面的时候必须要使用的。

PixelRatio

我们还是先看看官网怎么介绍的。

PixelRatio类提供了访问设备的像素密度的方法。

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

var 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方法，根据这一参数，返回最符合此尺寸的图片地址。

方法