开篇先介绍另外一种热更新方式：pushy，这是rn中文网推荐的，phshy集成方法

CodePush简介

CodePush 是微软提供的一套用于热更新 React Native 和 Cordova 应用的服务。
CodePush 是提供给 React Native 和 Cordova 开发者直接部署移动应用更新给用户设备的云服务。CodePush 作为一个中央仓库，开发者可以推送更新 (JS, HTML, CSS and images)，应用可以从客户端 SDK 里面查询更新。CodePush 可以让应用有更多的可确定性，也可以让你直接接触用户群。在修复一些小问题和添加新特性的时候，不需要经过二进制打包，可以直接推送代码进行实时更新。

CodePush 可以进行实时的推送代码更新：

直接对用户部署代码更新
管理 Alpha，Beta 和生产环境应用
支持 React Native 和 Cordova
支持JavaScript 文件与图片资源的更新
CodePush开源了react-native版本，react-native-code-push托管在GitHub上。

CodePush 安装与注册

1.安装 CodePush CLI

使用命令 npm install -g code-push-cli 安装CodePush终端

2.注册CodePush 账号

在终端输入code-push register，会打开注册页面让你选择授权账号
然后终端输入code-push login进行登陆

授权完成后，CodePush会显示你的Access Key，复制输入到终端即可完成注册并登陆。
ps.只要不主动退出(通过code-push logout命令)，登陆状态会一直有效。
相关命令:

code-push login 登陆
code-push loout 注销
code-push access-key ls 列出登陆的token
code-push access-key rm 删除某个 access-key
code-push rename 重命名已经存在App
code-push list 列出与你账户关联的所有App

3.在CodePush服务器注册app

在终端输入code-push app add <appName> <os> <platform>即可完成注册。
我这边输入的是：code-push app add ReactNativeCodePush android react-native

os参数为： ios, windows , android
platform参数为：react-native , cordova

Examples:

  app add MyApp ios react-native      Adds app "MyApp", indicating that it's an iOS React Native app
  app add MyApp windows react-native  Adds app "MyApp", indicating that it's a Windows ReactNative app
  app add MyApp android cordova       Adds app "MyApp", indicating that it's an Android Cordova app

注册完成之后会返回一套deployment key，该key在后面步骤中会用到。

集成CodePush SDK

第一步：在项目中安装 react-native-code-push插件
npm install --save react-native-code-push
第二步：在Android project中安装插件。

运行rnpm link react-native-code-push 这条命令将会自动帮我们在anroid文件中添加好设置。

CodePush提供了两种方式：RNPM 和 Manual，本次演示所使用的是RNPM。 
如果rnpm命令无法执行(rn0.26以后集成到了react-native-cli中)，请安装：运行`npm i -g rnpm`，来安装RNPM。

Android集成

1 打开android/app/build.gradle文件，修改android-buildTypes节点成如下

...
 buildTypes {
        debug{
            //省略了其他配置
            buildConfigField "String", "CODEPUSH_KEY", '""'
        }
        releaseStaging {
            buildConfigField "String", "CODEPUSH_KEY", '"此处填写Staging key"'
        }
        release {
            //省略了其他配置
            buildConfigField "String", "CODEPUSH_KEY", '"此处填写Production key"'
        }
    }
...

2 在android/app/build.gradle设置好deployment-key之后呢,我们就可以这样使用了:

···
import com.microsoft.codepush.react.CodePush;  // 引入codepush
···

@Override
protected List<ReactPackage> getPackages() {
     return Arrays.<ReactPackage>asList(
         ...
         new CodePush(BuildConfig.CODEPUSH_KEY, MainApplication.this, BuildConfig.DEBUG), // 添加这一行 BuildConfig.CODEPUSH_KEY记得要在对应位置把key加进去
         ...
     );
}

3 修改versionName。
在 android/app/build.gradle中有个 android.defaultConfig.versionName属性，我们需要把应用版本改成 1.0.0（默认是1.0，但是codepush需要三位数）。

android{
···
    defaultConfig{
    ···
        versionName "1.0.0"
    ···
    }
···
}

至此Code Push for Android的SDK已经集成完成。

使用react-native-code-psuh进行热更新

在app.js如下写：

/**
 * Created by 卓原 on 2018/5/16.
 *
 */

import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    Alert
} from 'react-native';

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

type Props = {};

export default class App extends Component<Props> {

    componentDidMount() {
        this.codePushUpdate()
    }

    /**
     * 远程服务检测更新
     * IMMEDIATE(0) // 更新完毕，立即生效
     * ON_NEXT_RESTART(1) // 下次启动生效
     * ON_NEXT_RESUME(2) // 切到后台，重新回来生效
     */
    codePushUpdate() {
        codePush.sync({
                installMode: codePush.InstallMode.IMMEDIATE,
                updateDialog: true
            },
            (status) => {
                switch (status) {
                    case codePush.SyncStatus.CHECKING_FOR_UPDATE:
                        alert('codePush.SyncStatus.CHECKING_FOR_UPDATE');
                        break;
                    case codePush.SyncStatus.AWAITING_USER_ACTION:
                        alert('codePush.SyncStatus.AWAITING_USER_ACTION');
                        break;
                    case codePush.SyncStatus.DOWNLOADING_PACKAGE:
                        alert('codePush.SyncStatus.DOWNLOADING_PACKAGE');
                        break;
                    case codePush.SyncStatus.INSTALLING_UPDATE:
                        alert('codePush.SyncStatus.INSTALLING_UPDATE');
                        break;
                    case codePush.SyncStatus.UP_TO_DATE:
                        alert('codePush.SyncStatus.UP_TO_DATE');
                        break;
                    case codePush.SyncStatus.UPDATE_IGNORED:
                        alert('codePush.SyncStatus.UPDATE_IGNORED');
                        break;
                    case codePush.SyncStatus.UPDATE_INSTALLED:
                        alert('codePush.SyncStatus.UPDATE_INSTALLED');
                        break;
                    case codePush.SyncStatus.SYNC_IN_PROGRESS:
                        alert('codePush.SyncStatus.SYNC_IN_PROGRESS');
                        break;
                    case codePush.SyncStatus.UNKNOWN_ERROR:
                        alert('codePush.SyncStatus.UNKNOWN_ERROR');
                        break;
                }
            },
            ({receivedBytes, totalBytes,}) => {
                alert('receivedBytes / totalBytes: ------------    ' + receivedBytes + '/' + totalBytes);
            }
        );
    }

    /**
     * 更新方法
     */
    onButtonPress = () => {
        codePush.sync({
            updateDialog: true,
            installMode: codePush.InstallMode.IMMEDIATE
        });
    };

    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>
                    Welcome to React Native CodePush2.22222!
                </Text>

                <TouchableOpacity onPress={this.onButtonPress}>
                    <Text>Check for updates</Text>
                </TouchableOpacity>
            </View>
        );
    }
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});

然后就是安装release的apk了
1. 打包bundle文件：

react-native bundle --entry-file index.js --platform android --dev false --bundle-output ./android/app/src/main/assets/index.android.bundle --assets-dest ./android/app/src/main/res/

打离线包并安装：
建议看此链接

实现热更新

修改app.js的内容，
再打bundle包并重新发布：
打bundle包步骤同上面步骤1

发布新的bundle：

code-push release ReactNativeCodePush ./android/app/src/main/assets/index.android.bundle 1.0.0 --deploymentName Production --description "1。rn更新" --mandatory true

此时重新打开app即可。
demo地址

大坑：发布bundle时，版本号要填写当前应用版本号，而不是未来版本号，否则不会更新，调试了几个小时，就因为这个原因!

参数：

CodePushOptions
checkFrequency (codePush.CheckFrequency) - 检测更新的时机
方法  描述
ON_APP_START(0) app启动后
ON_APP_RESUME(1)    app从后台切换过来时
ON_APP_MANUAL(2)    不能自动检测，只有在调用 codePush.sync()时触发
deploymentKey (String) - 部署key，可以在js里动态修改
installMode (codePush.InstallMode) - 安装时机


方法  描述
IMMEDIATE(0)    立即安装并重启app
ON_NEXT_RESTART(1)  下次启动app时安装
ON_NEXT_RESUME(2)   app从后台切换过来时安装
mandatoryInstallMode (codePush.InstallMode) - 同codePush.InstallMode.IMMEDIATE
minimumBackgroundDuration (Number) - app在后台切换过来安装的最小秒数，配合installMode.ON_NEXT_RESUME使用
updateDialog (UpdateDialogOptions) - 对话框


属性  描述
appendReleaseDescription(Boolean)   是否发送通知消息显示给用户，默认为false
descriptionPrefix(String)   描述的前缀，默认为“Description:”
mandatoryContinueButtonLabel(String)    强制更新下的继续按钮的文本，默认为“Continue”
mandatoryUpdateMessage(String)  强制更新的通知消息文本，默认为“An update is available that must be installed.”
optionalIgnoreButtonLabel(String)   忽略按钮的文本，默认为“Ignore”
optionalUpdateMessage(String)   通知消息文本，默认为“An update is available. Would you like to install it?”
title(String)   对话框的标题，默认为“Update available”
optionalUpdateMessage   通知消息文本
codePushStatusDidChange
用于监听检测、下载、安装的状态——SyncStatus

方法  描述
CHECKING_FOR_UPDATE (0) 查询更新
AWAITING_USER_ACTION (1)    有更新并且有对话框显示给最终用户(这只是适用updateDialog时使用)
DOWNLOADING_PACKAGE (2) 正在下载
INSTALLING_UPDATE (3)   正在安装
UP_TO_DATE (4)  更新完成
UPDATE_IGNORED (5)  提示更新后，用户选择了忽视(这只是适用updateDialog时使用)
UPDATE_INSTALLED (6)    已经安装,并将运行syncStatusChangedCallback函数返回后立即或下次启动更新，在InstallMode SyncOptions中指定。
SYNC_IN_PROGRESS (7)    有一个正在进行的同步操作运行,防止当前的调用被执行。
UNKNOWN_ERROR (-1)  同步操作遇到了一个未知错误。

codePushDownloadDidProgress
下载进度

返回参数    描述
totalBytes (number) 预计大小
receivedBytes(number)   已下载大小

ReactNative 热更新，集成CodePush

开篇先介绍另外一种热更新方式：pushy，这是rn中文网推荐的，phshy集成方法

CodePush简介

CodePush 安装与注册

1.安装 CodePush CLI

2.注册CodePush 账号

3.在CodePush服务器注册app

集成CodePush SDK

Android集成

使用react-native-code-psuh进行热更新

实现热更新

大坑：发布bundle时，版本号要填写当前应用版本号，而不是未来版本号，否则不会更新，调试了几个小时，就因为这个原因!

猜你喜欢

ReactNative 热更新，集成CodePush

开篇先介绍另外一种热更新方式：pushy， 这是rn中文网推荐的，phshy集成方法

CodePush简介

CodePush 安装与注册

1.安装 CodePush CLI

2.注册CodePush 账号

3.在CodePush服务器注册app

集成CodePush SDK

Android集成

使用react-native-code-psuh进行热更新

实现热更新

大坑：发布bundle时，版本号要填写当前应用版本号，而不是未来版本号，否则不会更新，调试了几个小时 ，就因为这个原因!

猜你喜欢

开篇先介绍另外一种热更新方式：pushy，这是rn中文网推荐的，phshy集成方法

大坑：发布bundle时，版本号要填写当前应用版本号，而不是未来版本号，否则不会更新，调试了几个小时，就因为这个原因!