react-native基础：Image资源适配

发表于   |   分类于   |  

判断设备的dpi

通关官方文档我们了解到，尽量建立统一的image读取路径，便于管理，我们都知道ios的图片资源通过@2x,@3x自动适配,react-native也使用了这一方法。

官方的PixelRatio告诉我们如何获得dpi

static get()

具体用法

1
var bat = PixelRatio.get();

返回设备的像素密度，例如：

  • PixelRatio.get() === 1
    1. mdpi Android 设备 (160 dpi)
  • PixelRatio.get() === 1.5
    1. hdpi Android 设备 (240 dpi)
  • PixelRatio.get() === 2
    1. iPhone 4, 4S
    2. iPhone 5, 5c, 5s
    3. iPhone 6
    4. xhdpi Android 设备 (320 dpi)
  • PixelRatio.get() === 3
    1. iPhone 6 plus
    2. xxhdpi Android 设备 (480 dpi)
  • PixelRatio.get() === 3.5
    1. Nexus 6

创建不同像素密度的资源

学习官方文档Image可知。
我们在src路径存放nav_back@2x.png nav_back@2x.png,加载时调用

require('../src/nav_back.png')

常见的bug

1 打包apk时报错 Error: Don’t know which android drawable suffix to use for asset:

参考github

参考stackflow

我们知道打开local-cli/bundle/assetPathUtils.js文件可以看到

1
2
3
4
5
6
7
8
9
10
function getAndroidAssetSuffix(scale) {
      switch (scale) {
            case 0.75: return 'ldpi';
               case 1: return 'mdpi';
                case 1.5: return 'hdpi';
                case 2: return 'xhdpi';
                case 3: return 'xxhdpi';
                case 4: return 'xxxhdpi';
              }
    }

而我们创建的资源有@3.5x,应该去掉,去掉之后打包就成功了。