美文网首页
React-Native系列,关于PixelRatio

React-Native系列,关于PixelRatio

作者: Valley4Z | 来源:发表于2018-03-29 15:32 被阅读126次

    概念

    PixelRatio-像素密度

    应用场景

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

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

    PixelRatio.getPixelSizeForLayoutSize(200)方法会根据当前设备的pixelratio返回对应值,比如当前设备的pixelratio为2,则返回 200 * 2 = 400,最后生成的参数为{ width: 400, height: 200 },然后开发者自己实现getImage方法,根据这一参数,返回最符合此尺寸的图片地址。

    方法

    static get()

    返回设备的像素密度,例如:
    PixelRatio.get() === 1 mdpi Android 设备 (160 dpi)
    PixelRatio.get() === 1.5 hdpi Android 设备 (240 dpi)
    PixelRatio.get() === 2 iPhone 4, 4S iPhone 5, 5c, 5s iPhone 6 xhdpi Android 设备 (320 dpi)
    PixelRatio.get() === 3 iPhone 6 plus xxhdpi Android 设备 (480 dpi)
    PixelRatio.get() === 3.5 Nexus 6

    static getFontScale()
    返回字体大小缩放比例。这个比例可以用于计算绝对的字体大小,所以很多深度依赖字体大小的组件需要用此函数的结果进行计算。
    如果没有设置字体大小,它会直接返回设备的像素密度。
    目前这个函数仅仅在Android设备上实现了,它会体现用户选项里的“设置 > 显示 > 字体大小”。在iOS设备上它会直接返回默认的像素密度。

    static getPixelSizeForLayoutSize(layoutSize: number)
    将一个布局尺寸(dp)转换为像素尺寸(px)。
    一定会返回一个整数数值。

    注意点:

    1、PixelRatio.get() 使用最多的获取像素密度的方法。

    2、px = dp / PixelRatio.get() .UI一般给出的设计稿单位都是px,那我们RN中的单位是dp,那么我们就需要将px转换为dp,这就需要使用像素密度了。

    相关文章

      网友评论

          本文标题:React-Native系列,关于PixelRatio

          本文链接:https://www.haomeiwen.com/subject/xfuwqftx.html