第六章 如何打包RN项目 以及 热更新的原理和应用

开发完了,该看看如何上线和维护一个项目了。

(一)打包apk

乍一看目录结构,有一个Android的gradle项目,所以笔者瞬间就想到使用Android Studio生成一个签名密钥,然后打包生成正式签名的apk,

(不太懂得给个链接自己去看: http://blog.csdn.net/sunylat/article/details/9239595/

待笔者adb install这个apk以后才发现,日了,native的代码跑完之后就红屏了(Error),这才突然想到,在开发的时候貌似有这样一个过程:

首次运行的话,有一个从服务端下载js的过程,所以中间肯定是缺了哪一步,才导致了无法访问到我们的React native界面,

那么到底该如何打包这样一个apk呢?

在这里详解一下Android的,关于IOS的,想了解的自行去rn中文网

1)生成一个签名密钥,

①你可以像作者一样用AS搞一个签名文件放在桌面上~   会生成一个

②也可以用命令行生成

因为作者不是这样生成的,所以就不做介绍了,可以参考

http://reactnative.cn/docs/0.42/signed-apk-android.html#content

备注:这里一定要注意,记住你给密钥起的别名(keyAlias),一定要记住,后面填错了会报Failed to read key from keystore…

2)在gradle中配置上正式的签名信息

别名要写对,然后再buildTypes里弄上这一句,注意,名字要对应起来!写的是config就是.config,至于下面的编译时混淆的功能就不在这里进行详细解释了。

3)在Rn项目的android目录中,执行./gradlew assembleRelease

前面的点别忘,记得要翻墙。(下载gradle过程中出现一堆点不要紧,只要保证网络正常,过一会就会下载完成)。

Gradle的assembleRelease参数会把所有用到的JavaScript代码都打包到一起,然后内置到APK包中。生成的APK文件位于android/app/build/outputs/apk/app-release.apk,它已经可以用来发布了。

4)可以用他提供的命令:./gradlew installRelease

也可以把apk直接adb install,这时候演示的时候已经可以脱离Reactpackager了

(二)热更新方案 和 应用

1)什么是热更新

       简单说就是不需要去应用市场重新下载,直接打开app就会下载更新的内容然后进入app,类似于经常玩的手游,游戏里需要更新,然后就有个进度条在读取。总结就是可以不通过应用市场来进行升级,极大的提升了app修bug和赋予新功能的能力。

备注:当然,Android现在app也可以在加载开机动画的时候检查更新,去服务端下载最新apk,然后调起install页面安装覆盖。但体验不佳,且IOS就无法这样搞了…所以热更新还是比较有研究价值的。

2)热更新方案原理

就目前来看,RN的热更新方案已有的,有微软的CodePush和reactnative中文网的pushy。

从上面的图中可以看出,当加载RN页面的时候,需要先加载叫做JS bundle的文件,而加载bundle文件又有几个途径,通过对Android项目中native代码的分析,可以得出bundle的加载路径来源取决于JSBundleLoader的loadScript,而loadScript又调用了CatalystInstanceImpl的loadScriptFromAssets或者loadScriptFromFile,所以,加载bundle文件的途径本质上有两种方式:

①loadScriptFromAssets

从android项目下的assets文件夹下去加载,这也是RN发布版的默认加载方式,也就是在cmd命令行下使用gradlew assembleRelease命令打包签名后的apk,里面的assets就包含有bundle文件

②loadScriptFromFile

第二种方式是从android文件系统也就是sd卡下去加载bundle。我们只要事先在sd卡下存放bundle文件,然后在ReactNativeHost的getJSBundleFile返回文件路径即可。getJSBundleFile首先会尝试在sd卡目录下:data/data//cache/react_native/

看是否存在index.android.bundle文件,如果有,那么就会使用该bundle,如果没有,那么就会返回null,这时候就是去加载assets下的bundle了。

具体的分析代码过程可参考 http://blog.csdn.net/shandian000/article/details/54582603

所以,热更新需要做的,就是两点:

①把服务端存放的bundle patch(包括bundle文件和一些图片资源)下载到sd卡

②在程序中加载bundle文件

根据bug的紧急/重要程度,可以把加载bundle的时机分为:立马加载和下次启动加载,这里将它们分别称为热加载和冷加载:

 (1)冷加载

冷加载方式比较简单,不用做任何特殊处理,下载并解压完patch.zip包之后,当应用完全退出之后(应用在后台不算完全退出,应用被杀死才算),用户再次启动应用,就会去加载新的bundle了

 (2)热加载

热加载需要特殊处理一下,处理也很简单,只要在解压unzip之后,调用以下代码即可

备注:这个检测的过程也可以通过JS端调用Android Native提供的module来完成,具体请详见前面的博客链接

3)热更新的应用

热更新可以自己搭服务进行,参考前面的博客链接,

但考虑到为了减少客户端与服务端开发量起见,我们选用RN中文网上提供的pushy进行详解

项目git地址: https://github.com/yujiesuperman/react-native-hotupload-thirdapp

① 去热更新开放平台注册账号,邮件激活   http://update.reactnative.cn

安装 npm install -g react-native-update-cli rnpm

在Rn项目中:npm install --save react-native-update

rnpm link react-native-update 看到success

②配置Bundle URL,(这里提供Android的,Ios的请参考Rn中文网)

0.29及以后版本:在你的MainApplication中增加如下代码:

即重写getJSBundleFile方法。

③如果你之前没安装过NDK,你还必须安装Android NDK,并设置环境变量ANDROID_NDK_HOME,指向你的NDK根目录

④登录与创建应用

pushy login

email:<输入你的注册邮箱>

password:<输入你的密码>

登录之后可以创建应用。注意iOS平台和安卓平台需要分别创建:

$ pushy createApp --platform ios

App Name:<输入应用名字>

$ pushy createApp --platform android

App Name:<输入应用名字>

两次输入的名字可以相同,这没有关系,create了以后,就可以看到update.json里的

备注:因为之前只创建了Android应用,所以只能看到Android相关信息

⑤接下来就该在应用里快速添加热更新相关的代码了

(1)先来看头部的引入的组件

注释里详细介绍了每个组件的作用,以及获取后面用到的参数appKey的方法

(2)然后看添加在thirdRNandNativeapp的主页面内的方法

是的,眼尖的同学又发现了,除了两个自定义的检查更新和下载更新的方法外,又出现了一个生命周期内的函数:componentWillMount()。

在组件创建之前,会先调用getDefaultProps(),这是全局调用一次,严格地来说,这不是组件的生命周期的一部分。在组件被创建并加载的时候,首先调用getInitialState(),来初始化组件的状态(现在多在构造里完成)。componentWillMount这个函数调用时机是在组件创建,并初始化了状态之后,在第一次绘制render()之前。可以在这里做一些业务初始化操作,也可以设置组件状态。这个函数在整个生命周期中只被调用一次。在这里我们进行了判断是否是第一次启动,或者是否模拟回滚操作。

(3)再来看页面上添加的这一部分,render()函数里

在这一坨热更新相关里,显示了当前Native包的版本号packageVersion,

这个在Native代码的这个位置:

热更新下载下来的新的版本号currentVersion,如果没有就显示空。

备注:这时候运行,多半会遇到这个错误,

原因是有时候用rnpm去link代码的时候会失败,需要手动配置;

首先确认

这三个不要忘了添加,,作者就是忘了添加第三处。。教程里都没有说。。。

然后在项目android目录下的setting.gradle文件中添加

include ':react-native-update'

project(':react-native-update').projectDir = 

new File(rootProject.projectDir, '../node_modules/react-native-update/android')

然后在app目录下的build.gradle文件中添加

dependencies {

compile project(':react-native-update') //<--这一句

……

}

运行实际效果图:

因为这个时候服务端并没有任何的版本,所以显示

⑥发布应用

先重新打包一个代签名的apk;方法见前。

pushy uploadApk android/app/build/outputs/apk/app-release.apk

即可上传apk以供后续版本比对之用。

随后你可以选择往应用市场发布这个版本,也可以先往设备上直接安装这个apk文件以进行测试。

这个时候上传了版本后,再点击更新,就显示

注意:要在Rn目录下执行这个命令,不能直接找到apk直接upload;要不然无法正常执行。

⑦修改一行代码,然后上传,

我们就把Demo1中的那张图片加上,加完后效果:

⑧然后去命令行去发布新的版本

pushy bundle --platform android

版本名,版本描述,最后一个可以空着,然后绑定到一个版本上去,这时候再回到应用:

备注:可以看到,当我们下载更新完一个版本之后,首次启动,isFirstTime会变为true,走那个模拟回滚的alert,在这里就不模拟了,感兴趣的自己玩下~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 157,298评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,701评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 107,078评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,687评论 0 202
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,018评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,410评论 1 211
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,729评论 2 310
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,412评论 0 194
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,124评论 1 239
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,379评论 2 242
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,903评论 1 257
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,268评论 2 251
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,894评论 3 233
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,014评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,770评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,435评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,312评论 2 260

推荐阅读更多精彩内容