控制台文档
帮助文档
快速开始
注册新用户
创建应用
cpcn-client桌面工具
发布新版本
热更新之React Native App
热更新之Cordova App
手动安装cpcn-react-native(Android)
手动安装cpcn-react-native(iOS)
示例:React Native App集成CodePush热更新,从零开始
关于我们

热更新之React Native App

我们为 React Native App 的开发者提供了一个包 —— cpcn-react-native,它是基于 react-native-code-push 开发的,并简化了开发者的操作,使开发者能更容易将 CodePush 热更新功能集成到自己的App中。
cpcn-react-native 是开源的,你可以 点击这里 访问源码。
若在使用过程中遇到问题,可与我们 在线联系,也可在 Github 上 提交Issues
详细示例请参考这里
在使用 Microsoft 提供的 react-native-code-push 时,需执行installlink、并修改代码进行配置,因不同版本的差异性,往往一不小心就弄错了。使用 cpcn-client桌面工具 能非常容易地完成类似的工作。
打开你电脑上安装的 cpcn-client桌面工具(如果还没有安装,则安装它),登入后点击要操作的项目名进入项目操作窗口,(如果还没有设置项目所在的文件夹,则设置它),点击 install cpcn-react-native & link,需稍等一会,待执行完毕后,则已自动将所需的依赖包和配置都做好了。
CodePush查看deployment key
在命令行中会分别提示你输入Android应用的deployment keyiOS应用的deployment key,如果你没有对应版本的应用,则直接按“回车键”跳过。
打开你的应用中的根组件文件(默认为根目录下的App.js),按以下方式修改代码:

import cpcn from "cpcn-react-native";

class App extends React.Component {
    // .....
}

App = cpcn(App);

export default App;
至此,你已经将 CodePush 热更新功能集成到了你的应用中。
是的,使用 cpcn-react-native 为你的应用添加热更新功能就是这么简单!
需要注意的是,如果你的 App 对网络访问进行了限制,则需要允许对 http://code-push.cnhttps://code-push.cn 的访问。
默认情况下,当检测到新版本时,会弹出一个对话框提示用户发现了新版本,当用户确认更新后(默认情况下用户不可取消更新),将启动更新并呈现Loading状态:
CodePush提示更新对话框 CodePush更新Loading
当更新完毕后,将自动使用新版本。
如果你不希望出现提示对话框,而是当有新版本时静默更新,则可这样设置:

import cpcn from "cpcn-react-native";

class App extends React.Component {
    // .....
}

App = cpcn({
    updateDialog: null // 将 updateDialog 设为 null,则不会出现提示对话框
})(App);

export default App;
你还可以监控更新状态、以及自定义进度条:

import cpcn from "cpcn-react-native";

class App extends React.Component {
    codePushStatusDidChange = function(status) { // 监控更新状态
        switch(status) {
            case cpcn.SyncStatus.UP_TO_DATE:
                // 已是最新版
                break;
            case cpcn.SyncStatus.UPDATE_INSTALLED:
                // 已成功安装更新
                break;
            case cpcn.SyncStatus.CHECKING_FOR_UPDATE:
                // 正检查是否存在新版本
                break;
            case cpcn.SyncStatus.INSTALLING_UPDATE:
                // 更新进行中
                break;
        }
    }
    
    codePushDownloadDidProgress = function(progress){ // 可在这里实现进度条
        console.log('received ' + progress.receivedBytes + ' of ' + progress.totalBytes);
    }
    
    // .....
}

App = cpcn({
    updateDialog: null // 将 updateDialog 设为 null,则不会出现提示对话框
})(App);

export default App;
上面的方法是最简单的在你的 react-native App 中集成 CodePush(中国)的方法。使用该方法,将使用默认的对话框,并且更新过程是不可控的。
如果你希望能自定义提示框和进度条、以及更好地对更新进行控制,则可使用 cpcn.check(options)(推荐)。例如:

import cpcn from "cpcn-react-native";

class App extends React.Component {
    componentDidMount(){
        cpcn.check({
            // 检测是否有新版本后执行此方法。
            // 如果没有可更新的版本,则 remotePackage 为 null,否则不为 null。
            // 当 remotePackage 不为 null 时,可提示用户有新版本,
            // 当用户确认更新后,则调用 agreeContinueFun 方法,并将 true 作为参数传入,表示继续执行更新。
            checkCallback: (remotePackage, agreeContinueFun) => {
                if(remotePackage){
                    // TODO: 显示对话框提示用户有新版本可更新
                    
                    // 第二个参数 agreeContinueFun 是 function,
                    // 当用户确认继续执行更新,则调用参数中的 agreeContinueFun 方法,并将 true 作为参数传入。
                    // 也可在任何地方调用 cpcn.agreeContinue(true),它与在此处调用 agreeContinueFun(true) 是等效的。
                    agreeContinueFun(true);
                }
            },
            // 下载开始前调用此方法。该配置是可选的。
            onDownload: () => {
                // TODO: do something
            },
            // 从服务器下载新版本时执行此方法。该配置是可选的。
            // 可在此显示下载进度条。
            // 参数 downloadProgress 里包含两个数据:totalBytes(需下载的总字节大小)、receivedBytes(已下载的字节大小)。
            downloadProgressCallback: (downloadProgress) => {
                // TODO: 可用 downloadProgress 数据制作进度条
                
                console.log('received ' + downloadProgress.receivedBytes + ' of ' + downloadProgress.totalBytes);
            },
            // 当新版本安装完成后执行此方法。该配置是可选的。
            // 如果不做此配置,则新版本安装完全后将马上重启 App(新版本在重启 App 后才会生效)。
            // 如果做了此配置,则可调用 restartFun 方法来控制是否重启 App。
            installedCallback: (restartFun) => {
                // TODO: do something
                
                // 参数 restartFun 是 function,
                // 若希望重启 App,则调用此方法,并将 true 作为参数传入。
                restartFun(true);
            }
        });
    }
    
    // .....
}

export default App;
cpcn.check(options) 的参数 options 可参考上例中的注释。
当然,你还可以更灵活地使用 cpcn-react-nativecpcn-react-native 是基于 MicrosoftCodePush 开发的,可 点击这里参考 Microsoft 的 CodePush 文档