React Native用CodePush实现热更新(一)

本文介绍用微软默认的CodePush Cloud和将code-push-server放在本地服务器上,以local作为storageType实现热更新。

1. 安装 CodePush CLI:

npm install -g code-push-cli
code-push -v 查看版本,显示版本说明安装成功。(这里用的是2.1.3-beta)

2. 登录CodePush:

这里介绍两种方式登录CodePush.

I. 一种是用微软默认的CodePush Cloud。

输入code-push register,这时会在浏览器里打开CodePush的注册页面,注册成功后会在页面上显示access key,复制这个key到 命令行窗口中,

React Native用CodePush实现热更新(一)

如图则登录成功。

II. 第二种方式是用code-push-server。因为默认的CodePush Cloud在中国访问会很慢,所以用code-push-server来搭建一个本地服务,应用的发布和更新都在本地进行。

① 安装CodePushServer:

sudo npm install code-push-server -g

② 配置数据库相关信息:

code-push-server-db init --dbhost localhost --dbuser root --dbpassword 0

③ 修改 /usr/local/lib/node_modules/code-push-server/config/config.js 中相关配置:

React Native用CodePush实现热更新(一)

React Native用CodePush实现热更新(一)


④ 启动服务:
code-push-server 

React Native用CodePush实现热更新(一)
浏览器中能打开 http://127.0.0.1:3000启动成功。React Native用CodePush实现热更新(一)

⑤ 登录CodePush:

code-push login http://127.0.0.1:3000

浏览器中打开登录页面。

React Native用CodePush实现热更新(一)

React Native用CodePush实现热更新(一)

⑥ 入用名和密account:admin password:123456)后点击获Token,复制access key到命令行窗口中。

React Native用CodePush实现热更新(一)

React Native用CodePush实现热更新(一)

React Native用CodePush实现热更新(一)如图则登录成功。

3. 添加APPDeployment Key:

AndroidiOS分别添加:

code-push app add CodePushDemo-ios ios react-native

code-push app add CodePushDemo-android android react-native

4. 安装react-nativ-code-push插件:

① 进入项目根目录。

② npm install [email protected] --save

注:这里没有用npm install [email protected] --save是因为如果用最新的版本5.x.x,在编译android是会出现“cannot find symbol class JSBundleLoader”的问题(https://github.com/Microsoft/react-native-code-push/issues/935

③ rnpm link react-native-code-push 这条命令将会自动帮我们在android/ios中添加好设置。


android:

I. 在android/app/build.gradle中自动添加上:apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"

II. 在/android/settings.gradle中自动添加上:

include ':react-native-code-push'

project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-code-push/android/app')


III. 在MainActivity中自动添加上:

import com.microsoft.codepush.react.CodePush;


ios:

在info.plist中自动添加上CodePushDeploymentKey。

5. 在 index.ios.js 和 index.android.js 中分别添加如下:

import codePush from 'react-native-code-push' ;

componentDidMount() {

   codePush.sync();

}

6. 修改android/ios程序相关配置:

ios:

① info.plist中添加CodePushDeploymentKeyCodePushServerURL


React Native用CodePush实现热更新(一)


注:CodePushDeploymentKeyDeployment Key(Production)

如果用微软默认的CodePush Cloud则不需要添加CodePushDeploymentKey。

② Xcode中以Release行。

Version 1.0修改1.0.0(1.0,但是codepush需要三位数)。

android:

① MainApplication中添加如下:

React Native用CodePush实现热更新(一)

注:CodePush的第一个参数Deployment Key(Production)

如果用微软默认的CodePush Cloud则不需要添加最后一个参数。

② android/app/build.gradleversionName1.0修改1.0.0(1.0,但是codepush需要三位数)。

7. 打包 + 发布

code-push release-react CodePushDemo-ios ios --des "description" -d Production

code-push release-react CodePushDemo-android android --des "description" -d Production

注:code-push release-react CodePushDemo-ios ios --des "test" --m true默认为Staging,如果用默认的话,需要把程序中相关的Deployment Key替换为Staging的key。


执行完成后,如果用微软默认的CodePush Cloud,在https://appcenter.ms中可以查看上传的发布信息;

如果用code-push-server作为服务器,则在本地的/Users/tablee/workspaces/storage和/Users/tablee/workspaces/data下会生成相应的文件。

8. 测试更新

① 修改index.ios.jsindex.android.js中代

② 重新打包androidios

③ 重新启动APP2次),界面改

9. 代码片段及程序

代码片段:https://gitee.com/AuroraDuring/codes/432v70uzdjfayb6kolep173

程序下载:http://download.****.net/download/u011886447/10204494

10. 相关命令:

添加部署:code-push deployment add CodePushDemo-ios Staging

删除部署:code-push deployment rm CodePushDemo-ios Staging

查看部署的key:code-push deployment list CodePushDemo-ios -k

查看历史版本:code-push deployment history CodePushDemo-ios Staging

11. 参考网址:

https://github.com/Microsoft/react-native-code-push/blob/master/Examples/CodePushDemoApp-pre0.49/demo.js

http://blog.****.net/fengyuzhengfan/article/details/52003798

http://www.jianshu.com/p/fa362da953c7

http://www.jianshu.com/p/cbc6a1dbfe30

http://blog.****.net/xiangzhihong8/article/details/73201421

http://lib.****.net/article/reactnative/67095

http://blog.****.net/itpinpai/article/details/50845625 ---- Android启动白屏

https://github.com/lisong/code-push-server

https://github.com/lisong/code-push-server/issues/103 ---- [Error]  Could not parse response: 

http://www.360doc.com/content/16/0911/08/35331283_589947241.shtml

http://blog.****.net/wnma3mz/article/details/77618475