RN软件版本更新，安装react-native-code-push后运行报错

一、什么是CodePush

CodePush是一个微软开发的云服务器。通过它，开发者可以直接在用户的设备上部署手机应用更新。CodePush相当于一个中心仓库，开发者可以推送当前的更新（包括JS/HTML/CSS/IMAGE等）到CoduPush，然后应用将会查询是否有更新。

二、在CodePush服务器上注册APP

1、安装 code-push-cli

npm install -g code-push-cli

2、创建一个code-push账号

code-push register || code-push login
使用上面两个命令之一后，会自动弹出授权网页，让你选择使用哪种方式进行授权登录，这里我们统一就选择使用GitHub即可。

3、在CodePush服务器注册App

code-push app add <appName> （需要为你的APP注册一个appName）
示例：code-push app add codepushDemo android react-native

三、RN中集成CodePush

1、React Native 0.60及以上版本插件安装与配置（安卓）

参考https://github.com/microsoft/react-native-code-push/blob/master/docs/setup-android.md

2、我的环境及安装版本

node-v14.17.6
“react-native”: “0.65.1”,
“react-native-code-push”: “^7.0.4”,

3、报错及解决办法

报错1:安装后不做任何操作，运行报错如下：

 Could not determine the dependencies of task ':app:compileDebugJavaWithJavac'.
> Could not resolve all task dependencies for configuration ':app:debugCompileClasspath'.
> Could not resolve project :react-native-code-push.
    Required by:
        project :app
    > No matching configuration of project :react-native-code-push was found. The consumer was configured to find an API of a component, as well as attribute 'com.android.build.api.attributes.BuildTypeAttr' with value 'debug' but:
        - None of the consumable configurations have attributes.

解决1:参考：https://github.com/microsoft/react-native-code-push/issues/2163
注意保持代码顺序一致。
修改文件路径：android/settings.gradle

rootProject.name = 'your_project_name'
apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)

include ':app', ':react-native-code-push'
project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-code-push/android/app')

问题2：解决问题1过后运行还是报错，报错内容如下：

Execution failed for task ':app:compileDebugJavaWithJavac'.
> Compilation failed; see the compiler error output for details.

解决2:参考：https://github.com/microsoft/react-native-code-push/issues/1873

1、android/app/build.gradle
                apply from: "../../node_modules/react-native/react.gradle"
                apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"
            2、android/app/src/main/java/com/slightscreenrn/MainApplication.java
                import com.microsoft.codepush.react.CodePush;
                public class MainApplication extends Application implements ReactApplication {
                    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
                        ...
                        // 2. Override the getJSBundleFile method in order to let
                        // the CodePush runtime determine where to get the JS
                        // bundle location from on each app start
                        @Override
                        protected String getJSBundleFile() {
                            return CodePush.getJSBundleFile();
                        }
                    };
                }
            3、android/app/src/main/res/values/strings.xml
                <resources>
                    <string name="app_name">AppName</string>
                    <string moduleConfig="true" name="CodePushDeploymentKey">XXXXXXXX</string>
                </resources>

4、添加热更新逻辑代码

一般常见的应用内更新时机分为两种，一种是打开App就检查更新，一种是放在设置界面让用户主动检查更新并安装
①打开APP就检查更新：在RN项目的根组件中添加热更新逻辑代码

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

②用户点击检查更新按钮：

codePush.checkForUpdate().then((update) => {
    if (!update) {
        Alert.alert("提示", "已是最新版本--", [
            {
                text: "Ok", onPress: () => {
                console.log("点了OK");
            }
            }
        ]);
    } else {
        codePush.sync({
                deploymentKey: deploymentKey,
                updateDialog: {
                    optionalIgnoreButtonLabel: '稍后',
                    optionalInstallButtonLabel: '立即更新',
                    optionalUpdateMessage: '有新版本了，是否更新？',
                    title: '更新提示'
                },
                installMode: codePush.InstallMode.IMMEDIATE,

            },
            (status) => {
                switch (status) {
                    case codePush.SyncStatus.DOWNLOADING_PACKAGE:
                        console.log("DOWNLOADING_PACKAGE");
                        break;
                    case codePush.SyncStatus.INSTALLING_UPDATE:
                        console.log(" INSTALLING_UPDATE");
                        break;
                }
            },
            (progress) => {
                console.log(progress.receivedBytes + " of " + progress.totalBytes + " received.");
            }
        );
    }
 }

在使用之前需要考虑的是检查更新时机，更新是否强制，更新是否要求即时等
如果是强制更新需要在发布的时候指定，发布命令中配置–m true
通过指定installMode来决定安装完成的重启时机，即更新生效时机

codePush.InstallMode.IMMEDIATE ：安装完成立即重启更新
codePush.InstallMode.ON_NEXT_RESTART ：安装完成后会在下次重启后进行更新
codePush.InstallMode.ON_NEXT_RESUME ：安装完成后会在应用进入后台后重启更新

四、发布CodePush更新包

1、生成bundle

在RN项目根目录下先创建bundle文件夹
生成bundle的命令 react-native bundle --platform 平台 --entry-file 启动文件 --bundle-output 打包js输出文件 --assets-dest 资源输出目录 --dev 是否调试
示例：

react-native bundle --platform android --entry-file index.js --bundle-output ./bundle/main.jsbundle --assets-dest ./bundle --dev false

2、上传bundle

上传bundle的命令code-push release-react <Appname> <Platform> -t <本更新包面向的旧版本号> -des <本次更新说明>
注意： CodePush默认是更新Staging 环境的，如果发布生产环境的更新包，需要指定–d参数：–d Production，如果发布的是强制更新包，需要加上 –m true强制更新。
示例：

code-push release-react SlightScreen android –m true

五、其他codepush命令

1、查看上传的版本
    code-push deployment history SlightScreen Staging
2、清除推送版本
    code-push deployment clear SlightScreen Production|Staging
3、codepush回滚
    code-push rollback SlightScreen Production -t v1
4、查看当前版本、当前部署环境下的部署信息
    code-push deployment ls SlightScreen
5、查看添加的App
    code-push app list
6、查看developmentkey
	code-push deployment ls appname -k