React Native for Android 热部署图片自己定义方案
情景
热部署时,我们期望升级包中包括js代码与图片资源。
bundle的热部署网上已经有两种方案了,一种是用反射,一种是利用RN自带函数。将bundle初始化时直接放到指定文件夹下,之后通过替换bundle文件实现代码热部署。
我们希望图片也能够实现热部署,以下是一个比較简单的解决方式。
详细需求:client解析从server下发的压缩包(zip),当中含js源文件index.android.bundle 和 图片包,解压后ReactNative指向 解压后index.android.bundle中的js代码,js代码中使用的图片资源指向
解压后的图片资源。(data/data/files/或sdcard里)
client依据执行场景 debug or release 决定从server 或者 本地解压文件夹获取图片资源,也就是一个url兼容在不同场景下訪问不同资源。
Image 使用演示样例
//1.请求react native server的图片 |
上面两种都会发送网络请求
期望:本地开发时,图片来自1,上线后,图片来自4.为了让两者在代码形式上一致
须要自己定义协议:http-cage://xxx/xxx.png 类似这样的形式,在不同环境下获取不同路径的图片。
Image载入资源机制
涉及类:
js: RCTImage.js, AssetRegistry.js,resolveAssetSource.js,Image.android.js,AssetRegistry.js
Native:ReactImageView.java
调用顺序关系:
1:遍历检測使用外部资源(比方RNserver上的图片)。检測到一处调用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 (RNserver) 跳7
6: return object 跳10
7: 依据id从AssetRegistry的assets中取出资源asset。
var asset = AssetRegistry.getAssetByID(source);
8:拼接资源路径
1.获取RNserver地址
var devServerURL = getDevServerURL(); //获取RN server地址。 通常是 http://localhost:8081/
2.取到server地址,依据地址与asset中的路径拼接,"http://localhost:8081/assets/image/open.png?
platform=android&hash=ff54b39af9b07e7380a4eda7e0212643"
3.取不到server地址,从压缩包中获得地址 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 server: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 Native for Android 热部署图片自己定义方案的更多相关文章
- React native 之android的图标和启动图片
哎哎呀呀,上篇说到了react native的IOS的图标和启动图片的设置,其实最主要的是尺寸!相应的尺寸设定好了以后就不会报错了! ok~这篇说的是React native的android的图标和启 ...
- React Native拆包及热更新方案 · Solartisan
作者:solart 版权声明:本文图文为博主原创,转载请注明出处. 随着 React Native 的不断发展完善,越来越多的公司选择使用 React Native 替代 iOS/Android 进行 ...
- React Native For Android 架构初探
版权声明:本文由王少鸣原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/171 来源:腾云阁 https://www.qclo ...
- 【React Native开发】React Native For Android环境配置以及第一个实例(1)
年9月15日也公布了ReactNative for Android,尽管Android版本号的项目公布比較迟,可是也没有阻挡了广大开发人员的热情.能够这样讲在2015年移动平台市场上有两个方向技术研究 ...
- React Native for Android 学习
前言 Facebook 在2015.9.15发布了 React Native for Android,把 JavaScript 开发技术扩展到了移动Android平台.基于React的React Na ...
- 在React Native中集成热更新
最近,在项目DYTT集成了热更新,简单来说,就是不用重新下载安装包即可达到更新应用的目的,也不算教程吧,这里记录一下. 1.热更新方案 目前网上大概有两个比较广泛的方式,分别是 react-nativ ...
- React Native for android 项目驱动教程
第一节 搭建开发环境 第二节 显示页面标题 第三节 实现页面布局 # React native是什么? React Native,是颠覆性的移动开发技术.它使用js开发,又是原生应用,不同于Hybri ...
- React Native for Android应用名及图标修改
应用开发完了,总不能顶着MyProject和小机器人图标就发布了吧?在发布之前,有多处需要修改的地方.今天我们来全面的看一下 应用ID 俗称PackageName,或APP ID.注意,在gradle ...
- react native 之 Android物理返回键
基本用法 根据文档,安卓back键的处理主要就是一个事件监听: BackAndroid.addEventListener('hardwareBackPress', this.onBackPressed ...
随机推荐
- 机器学习之路: python nltk 文本特征提取
git: https://github.com/linyi0604/MachineLearning 分别使用词袋法和nltk自然预言处理包提供的文本特征提取 from sklearn.feature_ ...
- [WC2018]州区划分(状压DP+FWT/FMT)
很裸的子集反演模板题,套上一些莫名其妙的外衣. 先预处理每个集合是否合法,再作显然的状压DP.然后发现可以写成子集反演的形式,直接套模板即可. 子集反演可以看这里. 子集反演的过程就是多设一维代表集合 ...
- 多线程_java多线程环境下栈信息分析思路
导读:Java多线程开发给程序带来好处的同时,由于多线程程序导致的问题也越来越多,而且对问题的查找和分析解决对于菜鸟程序原来是是件头疼的事.下面我就项目中使用多线程开发程序过程中遇到的问题做详细的分析 ...
- Go语言Web框架gwk介绍 (四)
事件 gwk支持事件系统,但并没有硬编码有哪些事件,而是采用了比较松散的定义方式. 订阅事件有两种方式: 调用On函数或者OnFunc函数 func On(moudle, name string, h ...
- codeforces 558B Amr and The Large Array-yy
题意:有一个数组.如今要削减它的尺寸.数组中同样元素的个数的最大值为数组的魅力值,要求削减后魅力值不能降低,同一时候要尽可能的把尺寸减到最小 分析:水题,主要是不要想复杂了.还有就是沉下心来做 代码: ...
- FT项目开发技术点(四)
1.jsp页面form传递过来的值是在后台ishi通过name获得的而非ID.上传文字要用input type=text属性 <tr> <th>品牌:</th> & ...
- [Apache] Apache 從 2.2 換至 2.4 httpd.conf 的調整筆記 (windows 環境)
原文地址: http://www.dotblogs.com.tw/maplenote/archive/2012/07/20/apache24_httpd_conf.aspx 整理一下 Windows ...
- App Store常用推广方法
转:http://www.cocoachina.com/bbs/read.php?tid-5000.html 天天潜水,在这里获益不少.不贡献一点似乎过意不去,所以在这里根据自己的经验谈谈基本的推广方 ...
- ConcurrentBag扩展 批量加入
public static void AddRange<T>(this ConcurrentBag<T> @this, IEnumerable<T> toAdd) ...
- 追MM和Java的23种设计模式
我在Java论坛看到这篇文章,作者以轻松的语言比喻了java的32种模式,有很好的启发作用,但可惜没有给出具体的意思,我就在后边加上了.这些都是最简单的介绍,要学习的话建议你看一下阎宏博士的<J ...