控制台文档
帮助文档
快速开始
注册新用户
创建应用
cpcn-client桌面工具
发布新版本
热更新之React Native App
手动安装cpcn-react-native(Android)
手动安装cpcn-react-native(iOS)
示例:React Native App集成CodePush热更新,从零开始
React Native App集成CodePush热更新,Function组件编程方式完整代码示例
使用模板创建项目
CodePush热更新费用规则参考
用户行为分析,让你更懂你的用户-Footprint
用户行为分析之React Native App
Footprint常见问题解答
开发者反利计划,送京东购物卡
技术支持与开发服务
关于我们

示例:React Native App集成CodePush热更新,从零开始

本示例从零开始演示如何将CodePush(中国)热更新功能集成到React Native App中。本示例演示了从创建一个React Native应用开始,到如何集成CodePush(中国)热更新功能,直到最后对热更新功能进行测试。
由于React Native版本和环境的差异性,若您在使用过程中遇到问题,请与我们联系

Step 1:创建React Native项目

鉴于不同版本与环境的差异性,导致有些小伙伴在安装配置时遇到一些莫名的问题,因此我们提供了一个模板,你可直接在此模板的基础上创建你自己的项目。
点击这里下载模板
如果你使用模板创建项目,则可跳过 Step 1 至 Step 4,直接进入 Step 5 。
在这个示例中,将项目建立在E盘的test目录下,并且项目的名字为myapp
打开命令行窗口,进入E:\test\目录,执行以下命令创建项目:

npx react-native init myapp

Step 2:在CodePush(中国)创建对应的应用

为了使用CodePush(中国)提供的服务,需在CodePush(中国)上创建对应的应用。
进入CodePush(中国)的控制台,并登入。如果还没有帐户,则注册一个新帐户
点击页面上的创建应用,在弹出的面板中填写相应的信息,以创建应用。应用的名称可任意填写,只要不与其它应用重复就行了。
因为这个示例即有Android版,也有iOS版,所以需要在CodePush(中国)的控制台中为Android版和iOS版各创建一个应用。
CodePush创建项目-Android
CodePush创建项目-iOS
如果你的应用只打算开发Android版或iOS版中的一个,则只需创建一个即可。

Step 3:安装及配置CodePush(中国)前端插件(cpcn-react-native)

使用cpcn-client桌面工具来完成此步骤的工作。
如果你的电脑上还没有安装cpcn-client,则点击这里下载并安装它
打开电脑上安装的cpcn-client,登入后,将能看到刚刚在控制台中创建的两个应用:myapp-androidmyapp-ios
点击myapp-android应用的名字,将会打开一个面板。在打开的面板中,设置项目文件夹,即E:\test\myapp。点击install cpcn-react-native,等待执行完毕。
注意:这可能需要一点时间,请耐心等待执行完毕。(建议开启科学上网方式后执行此操作)
CodePush安装与配置
由于iOS版需在Mac电脑上运行和测试,因此需在Mac电脑上为myapp-ios重复以上的操作。
注意:对于iOS版,在执行以上操作时可能会遇到错误。这是cpcn-client的一个未处理的Bug,可忽略它,然后开启科学上网,在命令窗口中进入项目文件夹,并执行以下命令:

npx pod-install
注意:对于iOS版,不要直接执行npx pod-install,应该先在cpcn-client上点击install cpcn-react-native,然后再执行npx pod-install
等待执行完毕后,cpcn-react-native就安装并配置成功了。
注意:对于iOS版,可能需要修改/ios/项目名/info.plist,使App能进行HTTP访问:

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>

Step 4:代码实现

用你喜欢的任意代码编辑器(例如:VS Code)打开项目源码(E:\test\myapp)。
为了使这个示例代码更清晰易读,将/App.js中的代码修改为下面这个样子:
若您使用 Function 组件编程方式(使用Hook),请点击这里查看完整代码示例

import React from 'react';
import { SafeAreaView, View, Text } from 'react-native';

class App extends React.Component {
    render() {
        return (
            <SafeAreaView>
                <View>
                    <Text>Ver: 1</Text>
                </View>
            </SafeAreaView>
        );
    }
};

export default App;
这个示例需要实现的效果是:当有版本需要更新时,弹出对话框提示用户需要更新,当用户确认更新后,开始下载并应用新版本,并且需显示下载进度。
/App.js中加入对话框和显示下载进度的代码:

import React from 'react';
import { SafeAreaView, View, Text, Button, Modal } from 'react-native';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            upgradeState: 0,
            upgradeAllBytes: 0,
            upgradeReceived: 0
        };
    }

    upgradeContinue = () => {
        // TODO: continue upgrade
    }

    render() {
        return (
            <SafeAreaView>
                <View>
                    <Text>Ver: 1</Text>
                </View>
                <Modal
                    visible={this.state.upgradeState > 0}
                    transparent={true}>
                    <View style={{padding:18, backgroundColor:"rgba(10,10,10,0.6)", height:"100%", display:"flex", flexDirection:"row", alignItems:"center"}}>
                        <View style={{backgroundColor:"#fff", width:"100%", padding:18}}>
                            {
                                this.state.upgradeState == 1
                                &&
                                <View>
                                    <View style={{paddingBottom:20}}>
                                        <Text>发现新版本</Text>
                                    </View>
                                    <View>
                                        <Button title="马上更新" onPress={this.upgradeContinue}/>
                                    </View>
                                </View>
                            }
                            {
                                this.state.upgradeState == 2
                                &&
                                <View>
                                    <Text style={{textAlign:"center"}}>{this.state.upgradeReceived} / {this.state.upgradeAllBytes}</Text>
                                </View>
                            }
                        </View>
                    </View>
                </Modal>
            </SafeAreaView>
        );
    }
};

export default App;
在这个示例中,用Modal来做提示对话框。用this.state.upgradeState来控制对话框是否显示,当this.state.upgradeState的值大于0时则显示,其中,当this.state.upgradeState的值等于1时显示“提示更新”的消息,当this.state.upgradeState的值等于2时显示“下载进度”。
接下来,使用cpcn-react-native提供的check(options)方法检查是否有可用的新版本、以及下载和应用新版本。为了使App启动时自动检查新版本,可将相关代码写在/App.jscomponentDidMount中:

import React from 'react';
import cpcn from 'cpcn-react-native';
import { SafeAreaView, View, Text, Button, Modal } from 'react-native';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            upgradeState: 0,
            upgradeAllBytes: 0,
            upgradeReceived: 0
        };
    }

    componentDidMount() {
        cpcn.check({
            // 检查是否有新版本后调用此方法
            checkCallback: (remotePackage, agreeContinueFun) => {
                if(remotePackage){
                    // 如果 remotePackage 有值,表示有新版本可更新。
                    // 将 this.state.upgradeState 的值设为1,以显示提示消息
                    this.setState({
                        upgradeState: 1
                    });
                }
            },
            // 下载新版本时调用此方法
            downloadProgressCallback: (downloadProgress) => {
                // 更新显示的下载进度中的数值
                this.setState({
                    upgradeReceived: downloadProgress.receivedBytes, // 已下载的字节数
                    upgradeAllBytes: downloadProgress.totalBytes // 总共需下载的字节数
                });
            },
            // 安装新版本后调用此方法
            installedCallback: (restartFun) => {
                // 新版本安装成功了,将 this.state.upgradeState 的值设为0,以关闭对话框
                this.setState({
                    upgradeState: 0
                }, () => {
                    // 调用此方法重启App,重启后将会使用新版本
                    restartFun(true);
                });
            }
        });
    }

    upgradeContinue = () => {
        // 用户确定更新后,调用此方法以开始更新
        cpcn.agreeContinue(true);
        // 将 this.state.upgradeState 的值设为2,以显示下载进度
        this.setState({
            upgradeState: 2
        });
    }

    render() {
        return (
            <SafeAreaView>
                <View>
                    <Text>Ver: 1</Text>
                </View>
                <Modal
                    visible={this.state.upgradeState > 0}
                    transparent={true}>
                    <View style={{padding:18, backgroundColor:"rgba(10,10,10,0.6)", height:"100%", display:"flex", flexDirection:"row", alignItems:"center"}}>
                        <View style={{backgroundColor:"#fff", width:"100%", padding:18}}>
                            {
                                this.state.upgradeState == 1
                                &&
                                <View>
                                    <View style={{paddingBottom:20}}>
                                        <Text>发现新版本</Text>
                                    </View>
                                    <View>
                                        <Button title="马上更新" onPress={this.upgradeContinue}/>
                                    </View>
                                </View>
                            }
                            {
                                this.state.upgradeState == 2
                                &&
                                <View>
                                    <Text style={{textAlign:"center"}}>{this.state.upgradeReceived} / {this.state.upgradeAllBytes}</Text>
                                </View>
                            }
                        </View>
                    </View>
                </Modal>
            </SafeAreaView>
        );
    }
};

export default App;
上面的代码量很少,也比较好理解。请留意以上代码中的注释。

Step 5:验证一下

通过以上的工作,热更新的功能已经添加到React Native App中了。接下来需要验证一下热更新功能是否能正常运作。
为了使测试更接近真实环境,将以上开发的App打个Release包来进行验证。
对于 Android 版,在命令窗口中进入项目的根目录并执行以下命令来生成 release 安装包:

npx react-native run-android --variant=release
如果你的环境不支持以上命令,可尝试用以下命令生成 release 包:

npx react-native run-android --mode=release
对于 iOS 版,在命令窗口中进入项目的根目录并执行以下命令来生成 release 安装包:

npx react-native run-ios --configuration Release
如果你的环境不支持以上命令,可尝试用以下命令生成 release 包:

npx react-native run-ios --mode Release
通过以上命令生成的Release包通常会自动安装到模拟器上,如果没有,则手动将其拖放到模拟器上。
在模拟器中打开刚刚安装的App,它现在是这样子的:
CodePush调试测试-更新前
可以看到,现在App界面上显示的是Ver: 1
现在,发个新版本到服务器。
先将代码稍做修改。将/App.js中的以下代码段:

<View>
    <Text>Ver: 1</Text>
</View>
修改成:

<View>
    <Text>Ver: 2</Text>
</View>
再次回到cpcn-client,点击发布新版本
注意:这可能需要一点时间,请耐心等待执行完毕。
CodePush调试测试-发布新版本
等待执行完毕后,新版本就已发布到服务器了。
注意:对于iOS版,在发布新版本时有可能会遇到CFBundleShortVersionString不正确的错误。这是已知的一个小Bug。你需要修改/ios/项目名/info.plist文件,将CFBundleShortVersionString的值修改为正确的版本号,例如:1.0.2。修改后应该是像下面这样子的:

<key>CFBundleShortVersionString</key>
<string>1.0.2</string>
注意:如果遇到了此错误,应该在修改CFBundleShortVersionString的值后,再重复之前的操作,即先生成Release安装包并安装到模拟器上,然后将/App.js中的Ver: 1修改为Ver: 2,然后再发布。否则有可能会导致Release包与发布的包的版本号不一致。
回到模拟器,关闭之前打开的App,重新打开它。这时候将会看到“发现新版本”的提示消息了:
CodePush调试测试-发现新版本
点击马上更新后,将会看到“下载进度”,由于这个示例需要更新的内容比较少,所以可能只是一闪而过。接着App将会自动重启,重启之后,就能看到已经是最新版本了:
CodePush调试测试-更新后的版本
以上就是从创建一个React Native项目,到最后测试热更新功能的所有步骤。