code-push react-native 自动更新

最近一个app项目使用了code-push，之前记录的匆忙，这里重写一下使用记录，内容不回很丰富，只是按本项目中已实现的功能来记录（这次我的项目只要求android端使用，这里只记录本项目的使用经历）。

官网：https://github.com/Microsoft/react-native-code-push/blob/HEAD/docs/setup-android.md

注意一个区别点：平时使用什么包大部分都是本项目中安装就可以了，code-push需要本地安装并且项目中安装。

1.首先本地安装: npm i react-native-code-push

2.注册登录code-push: code-push register（这里我之前做项目的时候已完成注册，提示已登录）

这个命令会打开一个网页，我是选择github的方式注册登录的。

图片演示

3.创建一个app项目:

查看关于app的命令

code-push app add <appName> <os> <platform>
code-push app add 项目名 设备 技术框架
新建成功会出现两个环境的key，production使用在正式环境，staging使用在测试环境

新建项目

4.获取app的两个key

除了新建的时候会出现key，要查看key可以用以下命令：

查看项目详情

如果已经使用的项目则会出现版本号，更新时间，下载次数等等：

详细的查询结果

5.在项目中安装：

在你的项目目录下npm i react-native-code-push
react-native link react-native-code-push
如果个人出现意外，跟着官网走就是了～

6.项目中配置key

位置：/android/app/src/main/res/values/strings.xml

<resources>
    <string moduleConfig="true" name="reactNativeCodePush_androidDeploymentKey">qwqws1qT7KEQksqb5ad78d1-152fqweewqew-48de-a31f-ccd34f718b39qw</string>
    <string name="app_name">appName</string>
</resources>

比如在安装的时候没有设置key的可以在配置中设置

/*
../android/app/src/main/java/com/...
*/
new CodePush(getResources().getString(R.string.reactNativeCodePush_androidDeploymentKey), getApplicationContext(), BuildConfig.DEBUG)

7.打包

android 目录下 ./gradlew assembleRelease
生成的apk所在位置：/android/app/build/outputs/apk

8.写入代码：

import { AppRegistry, View, ActivityIndicator, StyleSheet, Text } from 'react-native';
import React, { Component } from 'react';
import App from './src';
import codePush from 'react-native-code-push';  //引入

const styles = StyleSheet.create({
 //样式
})

class AppCont extends Component {
  constructor(props) {
    super(props)
    this.state = {
      show: false,
      download: 0,
    }
  }

  componentDidMount() {
    //检查更新
    codePush.sync(
      { updateDialog: false, installMode: codePush.InstallMode.IMMEDIATE },//无对话框，立即启动更新
      (status) => {
        switch (status) {
          case codePush.SyncStatus.UPDATE_IGNORED:
            //console.log('ignored')
            break;
          case codePush.SyncStatus.DOWNLOADING_PACKAGE:
            //console.log('download')
            this.setState({show: true})
            break;
          case codePush.SyncStatus.INSTALLING_UPDATE:
            //console.log('installing')
            this.setState({show: false})
            break;
        }
      },
      ({ receivedBytes, totalBytes, }) => {
        this.setState({download: parseInt(receivedBytes * 100 / totalBytes)})
      }
    );
  }

  render() {
    return (
      <View style={{ flex:1 }}>
        <App />
        {
          this.state.show ?
            <View style={styles.loadBox}>
              <View style={styles.loadView}/>
              <View style={styles.loadBackView}/>
              <ActivityIndicator
                size="large"
                color="#3385ff"
                style={styles.load}
                animating={this.state.loading}
              />
              <Text style={styles.loadText}>更新中：{this.state.download}%</Text>
            </View>
          : null
        }
      </View>
    );
  }
}

AppRegistry.registerComponent('appName', () => AppCont);

9.尝试自动更新

有人安装后，重复4步骤查看是否有下载记录。确认项目和code-push已经配置妥当。
尝试着更改一些app内容然后更新

code-push release-react laoqiu.com/mytms android
code-push release-react laoqiu.com/mytms android -d Production //注意环境

注意更新版本问题

尝试着更新后发现，你更新的版本号为1.1.1 就只能使安装的时候版本为1.1.1的出发更新，别的版本不会触发更新，会console反馈提示该软件有更新内容，但是不属于该版本。

使用补充：更新提示，中文对话框

componentDidMount() {
    codePush.sync(
      {
        updateDialog: {
          appendReleaseDescription: true,
          optionalIgnoreButtonLabel: '忽略',
          optionalInstallButtonLabel: '立即更新',
          title: '更新程序',
          optionalUpdateMessage: '检测到更新内容,是否立即更新?',
        },
        installMode: codePush.InstallMode.IMMEDIATE,
      },//显示对话框，询问更新
      (status) => {
        switch (status) {
          case codePush.SyncStatus.UPDATE_IGNORED:
            //console.log('对话框结果为忽略更新')
            break;
          case codePush.SyncStatus.DOWNLOADING_PACKAGE:
            //console.log('下载开始')
            this.setState({show: true})
            break;
          case codePush.SyncStatus.INSTALLING_UPDATE:
            //console.log('下载结束')
            this.setState({show: false})
            break;
        }
      },
      ({ receivedBytes, totalBytes, }) => {
        this.setState({download: parseInt(receivedBytes * 100 / totalBytes)})
      }
    );
  }