第六章 如何打包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,在这里就不模拟了,感兴趣的自己玩下~

推荐阅读更多精彩内容