【React Native】热更新Android、ios使用流程详解

3,040 阅读4分钟

一、基本使用流程

1.登录

appcenter login

输入命令后,会启动浏览器,copy页面上的token到命令行,然后回车即可。

2.创建App

//groupName 可选,默认创建为账号拥有
appcenter apps create -d <appDisplayName> -o <operatingSystem>  -p <platform>

//例如
appcenter apps create -d HotProject -o Android  -p React-Native

注意:创建ios需要使用iOS,注意大小写!

企业微信20211008-165429@2x.png

3.创建部署

appcenter codepush deployment add -a <ownerName>/<appName> Staging
appcenter codepush deployment add -a <ownerName>/<appName> Production

执行上述命令,会创建测试部署Staging和生产Production,并且生成对应的key:

image.png

可通过如下命令查看部署:

appcenter codepush deployment list -a <ownerName>/<appName>

可通过如下命令查看不同部署对应的key:

appcenter codepush deployment list -a <ownerName>/<appName> -k

例如:

image.png

4.发布更新

appcenter codepush release-react -a <ownerName>/<appName> -d <deploymentName> -t <targetBinaryVersion> 
[-t|--target-binary-version <targetBinaryVersion>] 
[-o|--output-dir] 
[-s|--sourcemap-output]
[--plist-file-prefix] 
[-p|--plist-file] 
[-g|--gradle-file] 
[-e|--entry-file] 
[--development] 
[-b|--bundle-name <bundleName>]
[-r|--rollout <rolloutPercentage>] 
[--no-duplicate-release-error] 
[-k|--private-key-path <privateKeyPath>] 
[-m|--mandatory] 
[-x|--disabled]
[--description <description>] 
[-d|--deployment-name <deploymentName>] 
[-a|--app <ownerName>/<appName>] 
[--disable-telemetry] 
[-v|--version]

比如发布一个Staging版本的更新:

appcenter codepush release-react -a <ownerName>/HotProject -t 1.0.0 -d Staging -m --description “发 现新版本~”

结果:

image.png

查看部署更新情况:

appcenter codepush deployment history -a <ownerName>/HotProject Staging

结果:

image.png

把发布在Staging环境的更新推送到Production:

appcenter codepush promote -a <ownerName>/HotProject -s Staging -d Production -t "*"

执行之后结果:

image.png

查看Production环境部署情况,发现已经发布了此更新:

image.png

二、android、ios配置多环境配置

做如下操作之前请先引入react-native-code-push库:

yarn add react-native-code-push

如果RN是60版本一下,需要手动link相关配置到android这边,60以上自动link无需任何配置,手动link使用如下命令:

react-native link react-native-code-push

如果你不确定是否已经自动配置code push相关代码,可以查看Android项目下settings.gradle文件中是否存在如下相关配置:

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

1.Android项目配置

可直接根据官方文档进行配置,以确保配置可用且保持最新,官方文档地址如下!

github.com/microsoft/r…

当然也可以参考我的配置,如下:

1.android项目下配置codepush所需的key,分为Staging(测试环境)和Production(生产环境),打开app/build.gradle,在buildtypes下新增如下如下配置:

release {
    resValue "string", "CodePushDeploymentKey", '"Production环境的key"'
}

releaseStaging {
    resValue "string", "CodePushDeploymentKey", '"Staging环境的key"'
    matchingFallbacks = ['release']
}

另外,在android{}内,添加如下代码:

apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"

2.在MainApplication文件中mReactNativeHost中新增如下代码:

@Nullable
@org.jetbrains.annotations.Nullable
@Override
protected String getJSBundleFile() {
    return CodePush.getJSBundleFile();
}

记得导包哦:

import com.microsoft.codepush.react.CodePush;

到此处,配置已经完成,测试的时候可以打releaseStaging包进行测试,测试通过后,使用Production进行发布即可;

2.ios配置

github.com/microsoft/r…

1.配置AppDelegate.m(注意RN版本)

//导包
#import <CodePush/CodePush.h>

找到
return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
替换为
return [CodePush bundleURL];

2.Staging和Production多环境配置,直接按照官方文档配置即可。

注意事项:打包测试的时候通过在edit schema中切换Staging和Release来对Staging和Production进行设置来区分环境,测试的话建议设置为staging,然后打包,adHoc进行测试即可,测试无误后,切换为release发布热更新即可。

企业微信20211025-155023@2x.png

3.js配置

1.检测更新

  componentWillUnmount() {
    CodePush.disallowRestart(); //禁止重启
  }

  componentDidMount() {
    CodePush.allowRestart(); //在加载完了,允许重启
    this.checkHotUpdate(); //开始检查更新
  }
  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: "新版本",
            },
          },
          this.codePushStatusDidChange.bind(this), //状态监听
          this.codePushDownloadDidProgress.bind(this) //下载进度
        );
    }
    
// 监听更新状态
  codePushStatusDidChange(syncStatus) {
    switch (syncStatus) {
      case CodePush.SyncStatus.CHECKING_FOR_UPDATE:
        console.log("-----Checking for update.");
        showToast('Checking for update');
        break;
      case CodePush.SyncStatus.DOWNLOADING_PACKAGE:
        console.log("-----Downloading package.");
        break;
      case CodePush.SyncStatus.AWAITING_USER_ACTION:
        console.log("-----Awaiting user action.");
        break;
      case CodePush.SyncStatus.INSTALLING_UPDATE:
        console.log("-----Installing update.");
        break;
      case CodePush.SyncStatus.UP_TO_DATE:
        console.log("-----App up to date.");
        showToast('App up to date');
        break;
      case CodePush.SyncStatus.UPDATE_IGNORED:
        console.log("-----Update cancelled by user.");
        break;
      case CodePush.SyncStatus.UPDATE_INSTALLED:
        console.log("-----Update installed and will be applied on restart.");
        break;
      case CodePush.SyncStatus.UNKNOWN_ERROR:
        console.log("-----An unknown error occurred.");
        showToast('An unknown error occurred');
        break;
    }
  }

  codePushDownloadDidProgress(progress) {
    console.log("------hot download progress : " + progress);
  }
  

更多使用和配置可参考官方文档!

三、注意事项

1.targetBinaryVersion: 目标二进制的版本号,它的可选值规则如图

image.png

2.Staging和Production版本分别为测试和发布版本,创建部署的时候规范点应该两个都创建,然后再Staging版本进行热更新测试,测试成功后,可通过promote命令发布到Production版本:

appcenter codepush promote -a <ownerName>/<appName> <sourceDeploymentName> <destDeploymentName>
[-t|--target-binary-version <targetBinaryVersion>] 
[-r|--rollout <rolloutPercentage>]
[--no-duplicate-release-error]
[-d|--description <description>]
[-a|--app <ownerName>/<appName>] 
[--disable-telemetry]

//例如,从Staging版本推送到Production版本
appcenter codepush promote -a MyGroup/MyAndroid Staging Production

# Promote the release to production and make it
# available to all versions using that deployment
appcenter codepush promote -a MyGroup/MyAndroid Staging Production -t "*"