React Native 使用Code-Push 更新APP

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 <appName>

开始配置

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

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

配置Android

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

命令行配置(推荐使用)

  • 如果是第一次进行配置,则需要先使用 npm i -g rnpm 进行安装.
  • 运行命令行 rnpm link react-native-code-push.
  • 当遇到需要输入deploymentKey时,按<ENTRY>先省略这一步.

手动配置

  1. 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')
  1. android/app/build.gradle添加Code-Push的依赖
...
dependencies {
    ...
    compile project(':react-native-code-push')
}
  1. 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 <appName>  -k

如果之前的都配置正确,那这里可以看到ProductionStagingDeployment Key,将这两个key粘贴下来.如果环境来决定需要用到哪个key.
在刚开始,肯定需要测试,那就将Staging对应的Deployment Key,替换到下面deployment-key-here的代码中.

原生Android 代码配置:

...

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)
        );
    }

    ...
}

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 <appName> <platform>

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

部署测试

在应用创建时,会自动生成StagingProduction这两个环境.
应用在开发阶段,通常都是在Staging下进行开发的,而Production作为生产环境.当应用在开发阶段开发完毕,可使用code-push promote命令从Staging 迁移到Production中.

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

code-push promote <APP_NAME> Staging Production -r 20%

Staging环境迁移到Production,但只让20%的用户进行使用.
当发现该版本问题较多时,当该版本符合自己期望时,可以全面发布.

code-push patch <APP_NAME> Production -r 100%

动态部署分配

添加部署环境

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

发布给特定部署环境

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

推荐阅读更多精彩内容