React Native 使用Code-Push 更新APP

转自：http://www.jianshu.com/p/87ccfb795635

这是一篇流程介绍相当简单易懂的文章，转载过来自己使用了

Code-Push

官方文档: https://github.com/Microsoft/react-native-code-push#getting-started

它能干什么 ?

React Native的应用是由 JavaScript文件与资源文件及原生代码组成.

Code-Push 插件能帮助终端用户更新JavaScript文件与图片资源.

当发布一个React Native的新版本时,Code-Push会保存你上个版本发布的文件,当你应用出现崩溃时,Code-Push帮你回滚到上个版本,而不会变成空白页面.

但是,当原生代码发生改变时,Code-Push就无能为力了,你只能通过应用市场去更新应用.(Android端可以自己下载apk进行安装)

配置准备步骤

安装Code-Push的命令行工具:

npm install -g code-push-cli

如果没有注册过Code-Push,则需要使用code-push register 进行注册

注册过则需要使用code-push login进行登录

最后注册 APP 到 Code-Push服务器:

code-push app add

开始配置

进入App根目录,运行一下命令:

npm install –save react-native-code-push@latest

配置Android

有两种方法可实现配置,一种是通过命名行,另外一种是手动.

命令行配置(推荐使用)

如果是第一次进行配置,则需要先使用 npm i -g rnpm 进行安装.

运行命令行 rnpm link react-native-code-push.

当遇到需要输入deploymentKey时,按先省略这一步.

手动配置

在android/settings.gradle文件中添加如下:

include ‘:app’, ‘:react-native-code-push’

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

在android/app/build.gradle添加Code-Push的依赖

…

dependencies {

…

compile project(‘:react-native-code-push’)

}

在android/app/build.gradle添加codepush.gradle 任务

…

apply from: “react.gradle”

apply from: “../../node_modules/react-native-code-push/android/codepush.gradle”

…

代码配置

在配置代码中,需要使用到deploymentKey,这个key 是标志应用的身份及环境的,可通过以下命令查看:

code-push deployment ls -k

如果之前的都配置正确,那这里可以看到Production与Staging的Deployment Key,将这两个key粘贴下来.如果环境来决定需要用到哪个key.

在刚开始,肯定需要测试,那就将Staging对应的Deployment Key,替换到下面deployment-key-here的代码中.

原生Android 代码配置:

…

For React Native v0.19 - v0.28:

import com.microsoft.codepush.react.CodePush;

public class MainActivity extends ReactActivity {

@Override
protected String getJSBundleFile() {
return CodePush.getJSBundleFile();
}

@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new CodePush("deployment-key-here", this, BuildConfig.DEBUG)
);
}

...

}

For React Native >= v0.29

import com.microsoft.codepush.react.ReactInstanceHolder;

public class MyReactNativeHost extends ReactNativeHost implements ReactInstanceHolder {

// … usual overrides

}

// 2. Provide your ReactNativeHost to CodePush.

public class MainApplication extends Application implements ReactApplication {

private final MyReactNativeHost mReactNativeHost = new MyReactNativeHost(this);

@Override

public void onCreate() {

CodePush.setReactInstanceHolder(mReactNativeHost);

super.onCreate();

}

}

Code-Push 的使用

JS配置

import CodePush from ‘react-native-code-push’;

…

componentWillMount() {

//访问慢,不稳定

CodePush.checkForUpdate(‘deployment-key-here’).then((update)=>{

if(!update){

Alert.alert(“提示”,”已是最新版本–”,[

{text:”Ok”, onPress:()=>{

console.log(“点了OK”);

}}

]);

}

else{

CodePush.sync({

deploymentKey: ‘deployment-key-here’,

updateDialog: {

optionalIgnoreButtonLabel: ‘稍后’,

optionalInstallButtonLabel: ‘后台更新’,

optionalUpdateMessage: ‘有新版本了，是否更新？’,

title: ‘更新提示’

},

installMode: CodePush.InstallMode.IMMEDIATE

});

}

});

}

…

方法

CodePush.checkForUpdate 检查更新的信息

CodePush.sync 下载更新

在使用Code-Push更新功能时,需要先考虑两个问题:

何时去检查是否有新版本

一般都是在应用开启时去检查,可以将检查的代码放到

componentDidMount

或者

componentWillMount

方法中. 如果你想更及时的检查,时机可以选在

当APP位于从后台切换到前台

.

AppState.addEventListener(“change”, (newState) => {

newState === “active” && codePush.sync();

});

当有可用的新版本时,什么时候去呈现给用户

Code-Push 有三种更新的策略:

IMMEDIATE 立即更新APP

ON_NEXT_RESTART 到下一次启动应用时

ON_NEXT_RESUME 当应用从后台返回时

配置到

installMode:

之后即可生效.

发布更新

当应用开发完成后,需要用以下命令发布更新:

code-push release-react

将上面所有步骤都走完后,更新功能就能使用了.

部署测试

在应用创建时,会自动生成Staging与Production这两个环境.

应用在开发阶段,通常都是在Staging下进行开发的,而Production作为生产环境.当应用在开发阶段开发完毕,可使用code-push promote命令从Staging 迁移到Production中.

在一个版本开发完毕后,当我们不知道该版本是否兼容市场上所有的机型的时候,我们可以选择一小部分人来测试该版本,可以使用以下命令:

code-push promote Staging Production -r 20%

从Staging环境迁移到Production,但只让20%的用户进行使用.

当发现该版本问题较多时,当该版本符合自己期望时,可以全面发布.

code-push patch Production -r 100%

动态部署分配

添加部署环境

code-push deployment add [APP_NAME] test-variant-one

发布给特定部署环境

code-push release-react [APP_NAME] ios -d test-variant-one

文／immutable（简书作者）

原文链接：http://www.jianshu.com/p/87ccfb795635

著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。