react-native使用react-native-code-push实现热更新


react-native版本：0.62.2

react-native-code-push：6.3.0

在找了很多文档、资料后，实现了热更新。

接入流程

1.安装 CodePush CLI

现在code-push转移到了 微软的app-center 中
可以选择安装使用 appcenter 或 code-push , 推荐安装 appcenter

1
2
npm install appcenter -g
nom install code-push -g

2.注册 CodePush账号

CodePush终端安装完成后就可以使用code-push命令了。
在终端输入code-push register，会跳转授权网页。在这个网页可以选择Github。

image

授权完成后，CodePush会显示你的Access Key，复制输入到终端即可完成注册并登陆。
ps.只要不主动退出(通过code-push logout命令)，登陆状态会一直有效。

3.在CodePush服务器注册App

先在 https://appcenter.ms/ 中注册app，react-native应用创建两个应用 android 和 IOS的

image.png

在项目根目录下 终端输入code-push app add 即可完成创建，注册完成之后会返回一套deployment key，包括Staging和Production。该key在后面步骤中会用到。

4.React Native(JavaScript)端集成CodePush

在rn中集成codepush，建议看官方相关的教程：https://github.com/microsoft/react-native-code-push
使用的rn版本对应不同的配置方法，建议rn使用较新版本。
记录一下0.62版本的配置
路径：\android\app\src\main\java\com\myapp\MainApplication.java

1
2
3
4
5
6
7
8
import com.microsoft.codepush.react.CodePush;

//因为是新版本，就不需要再 getPackages() 方法中再进行引入了，
//只需要引入下方的即可
@Override
        protected String getJSBundleFile() {
            return CodePush.getJSBundleFile();
        }

在路径： \android\app\build.gradle 中配置多模式方法：新版本不需要其他的配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
//引入的文件
apply from: "../../node_modules/react-native/react.gradle"
apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"


buildTypes {
        debug {
            signingConfig signingConfigs.debug
            resValue "string", "app_name", "app的名字debug"
            //这里的key为Staging的key
            resValue "string", "CodePushDeploymentKey", "生成的deployment key"
        }
        release {
            // Caution! In production, you need to generate your own keystore file.
            // see https://facebook.github.io/react-native/docs/signed-apk-android.
            signingConfig signingConfigs.release
            minifyEnabled enableProguardInReleaseBuilds
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
            resValue "string", "app_name", "app的名字"
            //这里的key为Productionde的key
            resValue "string", "CodePushDeploymentKey", "生成的Production的deployment key"
        }
        releaseStaging  {
            matchingFallbacks = ['release']
            signingConfig signingConfigs.release
            minifyEnabled enableProguardInReleaseBuilds
            resValue "string", "app_name", "app的名字Staging"
            //这里的key为Staging的key
            resValue "string", "CodePushDeploymentKey", "生成的Staging的deployment key"
            // resValue "string", "CodePushServerUrl", "https://codepush.microzan.com.cn/"
        }
    }

在 \android\settings.gradle中配置

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

5.发布更新的版本

1
2
3
4
5
6
7
8
9
appcenter codepush release-react -a <ownerName>/<appName> -t 1.0.3  -d Staging -m --description  "原始版本"

// ownerName  我自己搞错了，这个命令一直执行报错，
appcenter apps list //查看所有应用 这个可以看到 ownerName
参数说明：
   -t   目标版本，如果你想让1.0.0版本的应用更新，就写为1.0.0      这个版本格式是3位的，不能少
   -d   部署名称参数 Staging /  Production
   -m  强制更新
   --description  描述

目标版本号在 \android\app\build.gradle 中有配置

1
2
3
4
5
6
7
8
9
10
11
12
defaultConfig {
        applicationId "com.myapp"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode 1
        versionName "1.0.2"   //这个为当前版本号
        missingDimensionStrategy 'react-native-camera', 'general'
        multiDexEnabled true
        ndk {
            abiFilters  "armeabi-v7a"
        }
    }

使用命令更新后，在https://appcenter.ms/ 中就能看到更新包

codepush

之后在app中就可以接收到更新了，具体的更新代码就不描述了。
之后有了新的再更新