ReaceNative热更react-native-code-push

发布时间：2019-12-10 19:10:03 作者：Potato 阅读量：1837

安装

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

react-native link react-native-code-push

    1
    2
    3

运行react-native link的时候，命令行会提示输入部署码What is your CodePush deployment key for Android (hit to ignore)，这个提示只是第一次输入有效。
配环境

/android/app/src/main/java/com/XXXX/MainApplication.java

protected List<ReactPackage> getPackages() {
    //移除aotuLink code push引入的包，否则会报A JS bundle file named "null" could not be found
    for (ReactPackage rp : packages) {
        if (rp instanceof CodePush) {
          packages.remove(rp);
          break;
        }
      }
      //添加，引号内为KEY值需更换
      packages.add(new CodePush("Vjz6ist6GLrOaSnK0nrRqNd1Melw7uKobYESd",
          getApplicationContext(), BuildConfig.DEBUG));

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

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

android{
    defaultConfig{
        versionName "1.0.0"
    }
}

    1
    2
    3
    4
    5

前端界面

import CodePush from "react-native-code-push";


export default class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      receivedBytes: 0,
      totalBytes: 0,
      showProcess: false,
      showIndicator: false
    };
  }

  componentDidMount() {
    this.handleUpdate()
  }

  handleUpdate = async () => {
    this.setState({ showIndicator: true });
    // checkForUpdate 返回promise，包含了服务端安装包的各种信息，包的大小版本之类的,
    // 如果要构建构建个性化更新界面，需要用到此方法
    const updateMessage = await CodePush.checkForUpdate() || {};

    console.log(updateMessage);
    // return;

    // 执行更新
    await CodePush.sync(
      // 第一个参数吗，是个对象，可定义更新的动作
      {
        // 安装模式 'IMMEDIATE' 立刻安装， ONNEXTRESUME 下次启动安装
        installMode: CodePush.InstallMode.ONNEXTRESUME,

        // 强制更新模式下的安装，默认是IMMEDIATE 直接安装
        mandatoryInstallMode: CodePush.InstallMode.IMMEDIATE,

        //更新确认弹窗设置，设置系统自带弹窗中的内容
        updateDialog: {
          mandatoryUpdateMessage: '强制更新内容: ' + updateMessage.description,
          mandatoryContinueButtonLabel: '强制更新/确认',
          optionalIgnoreButtonLabel: '取消',
          optionalInstallButtonLabel: '安装',
          optionalUpdateMessage: '本次更新内容: ' + updateMessage.description,
          title: '发现新版本'
        }
      },
      // 第二个参数，更新状态检测，返回数字
      //0 已经是最新，1 安装完成、等待生效，2 忽略更新，3 未知错误，4 已经在下载了，5 查询更新，6 弹出了更新确认界面，7 下载中，8下载完成
      (status) => {

        switch (status) {
          case 0: alert('已经是最新版本');
            break;
          case 1: !updateMessage.isMandatory && alert('更新完成, 再启动APP更新即生效');
            break;
          case 3: alert('出错了，未知错误');
            break;
          case 7: this.setState({ showProcess: true });
            break;
          case 8: this.setState({ showProcess: false });
            break;
        }
      },
      // 第三个参数，检测下载过程
      ({ receivedBytes, totalBytes }) => {
        // console.log('DownloadProgress: ', receivedBytes, totalBytes);
        this.setState({ receivedBytes: (receivedBytes / 1024).toFixed(2), totalBytes: (totalBytes / 1024).toFixed(2) })
      },
    );
    this.setState({ showIndicator: false });
  };

  handleUpdate = () => this.handleUpdate().catch((e) => {
    this.setState({ showIndicator: false });
    alert(e)
  });

  render() {
    return (
      <View>
        <Text>第一次变更！！！！！！</Text>
        {this.state.showProcess ? <Text>下载进度:{this.state.receivedBytes}/{this.state.totalBytes}</Text> : null}
      </View >
    )
  }
}

我要评论