（笔记） RN React Native 热更新（react-native-code-push） AppCenter

苹果App允许使用热更新Apple's developer agreement, 为了不影响用户体验，规定必须使用静默更新。 Google Play不能使用静默更新，必须弹框告知用户App有更新。中国的android市场必须采用静默更新（如果弹框提示，App会被“请上传最新版本的二进制应用包”原因驳回）。 

自备梯子，国内App可自配下载地址或者参考 rn中文网

 code push已经迁移到 App Center上

 

基本步骤就是 配置 打包 发布新版本

 

参考

官方文档 安装 发布

https://docs.microsoft.com/en-us/appcenter/distribution/codepush/react-native#releasing-updates

https://www.jianshu.com/p/84307d3aa824      //这个比较详细

 

 

   安装App Center CLI

npm install -g appcenter-cli

 

 

添加项目

appcenter apps create -d AwesomeProject -o Android -p React-Native

检测是否添加成功

appcenter apps list

部署 （获取key）

appcenter codepush deployment add -a slf1501-163.com/AwesomeProject Staging

appcenter codepush deployment add -a slf1501-163.com/AwesomeProject Production

 查询key

appcenter codepush deployment list -a  slf1501-163.com/AwesomeProject  -k

 

 记得把MainApplication里的key替换

 

@Override

protectedList<ReactPackage>getPackages(){

returnArrays.<ReactPackage>asList(

newMainReactPackage(),

newCodePush("CTjphNv3zzJCF2wbVQfwaIhcNWE9HJ1Wh1Zp4",getApplicationContext(),BuildConfig.DEBUG)

);

}

 

入口文件

import {AppRegistry} from 'react-native';
import CodePush from "react-native-code-push";
// 静默方式，app每次启动的时候，都检测一下更新 'ON_APP_RESUME'
// const codePushOptions = { checkFrequency: CodePush.CheckFrequency.ON_APP_RESUME };

// 手动方式接收更新的方式
const codePushOptions = { checkFrequency: CodePush.CheckFrequency.ON_APP_RESUME };
import _App from './App';
const App = CodePush(codePushOptions)(_App);
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);

或者

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

import CodePush from "react-native-code-push"; // 引入code-push

let codePushOptions = {
  //设置检查更新的频率
  //ON_APP_RESUME APP恢复到前台的时候
  //ON_APP_START APP开启的时候
  //MANUAL 手动检查
  checkFrequency : CodePush.CheckFrequency.ON_APP_RESUME
};

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};

class App extends Component<Props> {

  //如果有更新的提示
  syncImmediate() {
    CodePush.sync( {
          //安装模式
          //ON_NEXT_RESUME 下次恢复到前台时
          //ON_NEXT_RESTART 下一次重启时
          //IMMEDIATE 马上更新
          installMode : CodePush.InstallMode.IMMEDIATE ,
          //对话框
          updateDialog : {
            //是否显示更新描述
            appendReleaseDescription : true ,
            //更新描述的前缀。 默认为"Description"
            descriptionPrefix : "更新内容：" ,
            //强制更新按钮文字，默认为continue
            mandatoryContinueButtonLabel : "立即更新" ,
            //强制更新时的信息. 默认为"An update is available that must be installed."
            mandatoryUpdateMessage : "必须更新后才能使用" ,
            //非强制更新时，按钮文字,默认为"ignore"
            optionalIgnoreButtonLabel : '稍后' ,
            //非强制更新时，确认按钮文字. 默认为"Install"
            optionalInstallButtonLabel : '后台更新' ,
            //非强制更新时，检查到更新的消息文本
            optionalUpdateMessage : '有新版本了，是否更新？' ,
            //Alert窗口的标题
            title : '更新提示'
          } ,
        } ,
    );
  }

  componentWillMount() {
    CodePush.disallowRestart();//禁止重启
    this.syncImmediate(); //开始检查更新
  }

  componentDidMount() {
    CodePush.allowRestart();//在加载完了，允许重启
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit App.js
        </Text>
        <Text style={styles.instructions}>
          {instructions}
        </Text>

        <Text style={styles.instructions}>
          这是更新的版本
        </Text>
      </View>
    );
  }
}

// 这一行必须要写
App = CodePush(codePushOptions)(App)

export default App

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,
  },
})

 

打包 apk  安装以后 更改样式 发布

appcenter codepush release-react -a slf1501-163.com/splashExample-android    

-m true  强制更新