情景
热部署时,我们期望升级包中包含js代码与图片资源。bundle的热部署网上已经有两种方案了,一种是用反射,一种是利用RN自带函数,将bundle初始化时直接放到指定目录下,之后通过替换bundle文件实现代码热部署。我们希望图片也可以实现热部署,下面是一个比较简单的解决方案。
具体需求:客户端解析从服务器下发的压缩包(zip),其中含js源文件index.android.bundle 和 图片包,解压后ReactNative指向 解压后index.android.bundle中的js代码,js代码中使用的图片资源指向
解压后的图片资源。(data/data/files/或sdcard里)
客户端根据运行场景 debug or release 决定从服务器 或者 本地解压目录获取图片资源,也就是一个url兼容在不同场景下访问不同资源。
Image 使用示例
//1.请求react native server的图片 <Image source={require('./image/help.png')} style={styles.helpImage}/> //2.请求网络的图片 <Image source={uri:'http://xxxxxx/image/help.png'} style={styles.helpImage}/> //3.请求native图片 <Image source={{uri:'help'}} style={styles.helpImage}/> //4.请求手机指定路径图片 <Image source={{uri:'file:///sdcard/help.png'}}
|
上面两种都会发送网络请求
期望:本地开发时,图片来自1,上线后,图片来自4.为了让两者在代码形式上一致
需要自定义协议:http-cage://xxx/xxx.png类似这种形式,在不同环境下获取不同路径的图片。
Image加载资源机制
涉及类:
js: RCTImage.js,AssetRegistry.js,resolveAssetSource.js,Image.android.js,AssetRegistry.js
Native:ReactImageView.java
调用顺序关系:
1:遍历检测使用外部资源(比如RN服务器上的图片),检测到一处调用AssetRegistry
2:AssetRegistry.registerAsset
将资源加入到AssetRegistry的assets数组中,将id返回,也就是资源在assets中的索引值。
3 检测到<Image 标签 触发 Image.android.js render
4:resolveAssetSource.resolveAssetSource(source)
source可能是object类型,封装了图片url,或者是number类型,也就是资源id,id值由 步骤2 决定。
5: 判断资源类型
object:非本地资源(网络、sdcard、apk中图片)跳6
number: 资源id (RN服务器) 跳7
6: return object 跳10
7: 根据id从AssetRegistry的assets中取出资源asset。
var asset = AssetRegistry.getAssetByID(source);
8:拼接资源路径
1.获取RN服务器地址
var devServerURL = getDevServerURL(); //获取RN 服务器地址, 一般是 http://localhost:8081/
2.取到服务器地址,根据地址与asset中的路径拼接,"http://localhost:8081/assets/image/open.png?platform=android&hash=ff54b39af9b07e7380a4eda7e0212643"
3.取不到服务器地址,从压缩包中获得地址getPathInArchive。
地址返回。9
9: 根据url 构建和 6类似的object
function assetToImageSource(asset): ResolvedAssetSource { var devServerURL = getDevServerURL(); return { __packager_asset: true,width: asset.width,height: asset.height,uri: devServerURL ? getPathOnDevserver(devServerURL,asset) : getPathInArchive(asset),scale: pickScale(asset.scales,PixelRatio.get()),}; }
10:Image.android.js 收到 object,与 NativeProps合并,
var nativeProps = merge(this.props,{ style,src: source.uri,});
11:合并后的NativeProps传入 RCTImage
12: RCTImage解析NativeProps将uri传给java的ReactImageView.java setSource
协议自定义方案
在11到12之间进行协议判断,修改Image.android.js文件及resolveAssetSource.js。
Image.android.js render: function() { ... var prefix = 'http-cage://'; var match = nativeProps.src.indexOf(prefix); if(match == 0){//以http-cage://开头 console.log(__DEV__); var realUrl = nativeProps.src.substring(prefix.length,nativeProps.src.length); if(debug){//debug 情况 RN 服务器:http://10.0.3.5:8081/assets/image/help.png nativeProps.src = resolveAssetSource.getDevServerURL()+realUrl; }else {//release 情况 图片路径:file:///sdcard/image/help.png nativeProps.src = 'file://'+'/sdcard/'+realUrl; } } }
resolveAssetSource.js //使 getDevServerURL 外部可用 module.exports.getDevServerURL = getDevServerURL;
自定义协议使用示例
//测试版本0.13.2 <Image source={{uri: 'http-cage://image/finance.png'}} style={styles.phoneImage}/> |
0.14开始图片放到 根目录 img文件下并且在js中被require,就会被打入bundle中,压缩比很夸张,不知道用了什么压缩算法。
<Image source={require('./img/help.png')} style={styles.helpImage}/>
后记