原生端（iOS和Android）读取ReactNative本地图片

在ReactNative开发过程中，有时需要在原生端显示RN里的图片，这样的好处是可以通过热更新来更新APP里的图片，而不需要发布原生版本，而ReactNative里图片路径是相对路径，类似'./xxximage.png'的写法，原生端是无法解析这类路径，那么如果将RN的图片传递给原生端呢？

Image.resolveAssetSource(source);复制代码

const myImage = require('./Images/icon_splash.jpg');
const resolveAssetSource = require('react-native/Libraries/Image/resolveAssetSource');
const resolvedImage = resolveAssetSource(myImage);
console.log(resolvedImage);复制代码

resolveImage的打印结果如下：

可以看到，resolveAssetSource 方法不仅返回了图片到宽高，还有Uri及scale属性值。 上图中，Uri的值为 http:// 开头的链接，这就涉及到RN对于Uri的定义规则：

（1）开发者模式下，图片会由Package Server 本地服务器加载，Uri会返http的本地链接。

（2）发布模式下，图片已经被打包到原生目录下，例如Android端res下的drawable资源目录。 所以我们可以在原生端通过Uri来获取rn中定义的图片资源。

Android端

/**
     *  release模式下 uri为图片名称,例如, 在rn项目的Images目录下有张icon_splash名称的图片
     *  那么 uri 为 images_icon_splash
     *  开发者模式下，图片格式为package server 地址，例如: http: // 192.xxx
     * @param params
     */
    @ReactMethod
    public void showRNImage(ReadableMap params) {
        String rnImageUri;
        try {
            rnImageUri = params.getString("uri");
            Log.i("showRNImage", "uri : " + rnImageUri);
            BitmapUtil.loadImage(rnImageUri);
        } catch (Exception e) {
            return;
        }
    }复制代码

loadImage方法接收Uri参数。来看loadImage方法是怎么实现的：

public static Drawable loadImage(String iconUri) {
        if (TextUtils.isEmpty(iconUri)) {
            return null;
        }
        Log.e("BitmapUtil", "isDebug: " + MainApplication.instance.isDebug());
        if (MainApplication.instance.isDebug()) {
            return JsDevImageLoader.loadIcon(iconUri);
        } else {
            Uri uri = Uri.parse(iconUri);
            if (isLocalFile(uri)) {
                // 本地文件
                return loadFile(uri);
            } else {
                return loadResource(iconUri);
            }
        }
    }复制代码

loadImage方法接收Uri参数。来看loadImage方法是怎么实现的：

public static Drawable loadImage(String iconUri) {
        if (TextUtils.isEmpty(iconUri)) {
            return null;
        }
        Log.e("BitmapUtil", "isDebug: " + MainApplication.instance.isDebug());
        if (MainApplication.instance.isDebug()) {
            return JsDevImageLoader.loadIcon(iconUri);
        } else {
            Uri uri = Uri.parse(iconUri);
            if (isLocalFile(uri)) {
                // 本地文件
                return loadFile(uri);
            } else {
                return loadResource(iconUri);
            }
        }
    }复制代码

首先我们判断是否是开发者模式，如果是则执行loadIcon方法，从本地目录直接加载。否则执行从手机本地目录加载或者根据资源ID加载。

开发模式下，Uri 为链接模式，所以我们可以通过流来获取

@NonNull
    private static Drawable tryLoadIcon(String iconDevUri) throws IOException {
        URL url = new URL(iconDevUri);
        Bitmap bitmap = BitmapFactory.decodeStream(url.openStream());
        BitmapDrawable bitmapDrawable = new BitmapDrawable(MainApplication.instance.getResources(), bitmap);
        Log.e("JsDevImageLoader", "bitmap drawable width：" + bitmapDrawable.getIntrinsicWidth());
        return bitmapDrawable;
    }复制代码

发布模式为以下两种方式：

/**
     * 加载手机本地目录图片
     * @param uri
     * @return
     */
    private static Drawable loadFile(Uri uri) {
        Bitmap bitmap = BitmapFactory.decodeFile(uri.getPath());
        return new BitmapDrawable(MainApplication.instance.getResources(), bitmap);
    }
 
    /**
     * 加载drawable目录下的图片
     * @param iconUri
     * @return
     */
    private static Drawable loadResource(String iconUri) {
        return ResourceDrawableIdHelper
                .instance
                .getResourceDrawable(MainApplication.instance, iconUri);
    }复制代码

iOS端

iOS端相对Android简单很多，只需要直接解析成UIImage即可：

#import <React/RCTConvert.h>
 
RCT_EXPORT_METHOD(showRNImage:(id)rnImageData){
    dispatch_async(dispatch_get_main_queue(), ^{
    UIImage *rnImage = [RCTConvert UIImage:rnImageData];
    ...
    });
}复制代码

总结

在原生端读取RN图片，不管是混合开发，还是纯RN开发，涉及的使用场景都是很多的。例如，动态更新Splash。所以掌握了这个技能，有助于我们做出体验更好的应用。