源码已上传Github:https://github.com/songxiaoliang/native-read-rn-image
在ReactNative开发过程中,有时需要在原生端显示RN里的图片,这样的好处是可以通过热更新来更新APP里的图片,而不需要发布原生版本,而ReactNative里图片路径是相对路径,类似'./xxximage.png'
的写法,原生端是无法解析这类路径,那么如果将RN的图片传递给原生端呢?
解决方案
1、图片如果用网络图,那只需要将url字符串地址传递给原生即可,这种做法需要时间和网络环境加载图片,不属于本地图片,不是本方案所追求的最佳方式。
2、懒人做法是把RN的本地图片生成base64字符串然后传递给原生再解析,这种做法如果图片太大,字符串会相当长,同样不认为是最佳方案。
其实RN提供了相关的解决方法,如下:
resolveAssetSource()
Image.resolveAssetSource(source);
Resolves an asset reference into an object which has the properties uri
, width
, and height
.
Parameters:
NAME | TYPE | REQUIRED | DESCRIPTION |
---|---|---|---|
source | number, object | Yes | A number (opaque type returned by require('./foo.png')) or an ImageSource . |
ImageSource
is an object like{ uri: '<http location || file path>' }
resolveAssetSource 方法可以将资产引用解析为具有uri,width和height属性的对象。参数为一个数字(由require('。/ foo.png')返回的opaque类型)或 ImageSource。
示例代码如下:
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);
}
}
}
首先我们判断是否是开发者模式,如果是则执行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。所以掌握了这个技能,有助于我们做出体验更好的应用。