React Native for Android 热部署图片自定义方案

前端之家收集整理的这篇文章主要介绍了React Native for Android 热部署图片自定义方案前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

情景

热部署时,我们期望升级包中包含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}/>

后记

经同事验证,img文件夹下的图片被打到了apk的res中去,之前误导大家了,sorry

猜你在找的React相关文章