ReactNative 学习笔记 Code Push 热更新

最新推荐文章于 2024-03-21 09:49:32 发布

原创最新推荐文章于 2024-03-21 09:49:32 发布 · 508 阅读

0 ·

CC 4.0 BY-SA版权

ReactNative 专栏收录该内容

25 篇文章

订阅专栏

本文介绍了如何使用微软的CodePush服务为ReactNative应用实现热更新。通过将JS包上传到CodePush服务器，然后在客户端检测并下载最新版本，从而避免重新发布APK。文章详细讲解了从安装CodePush CLI、注册应用、配置项目到发布更新的整个流程，并提供了关键代码示例和注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Introduction

热更新在不用的领域有着多重多样的解释。我们关心的app的热更新简单来讲是：无需发新版本，实现app添加新功能。

这里主要介绍Microsoft退出的CodePush平台实现热更新。它是一个云端服务，支持Cordova and React Native的开发者直接更新app, 而无需重新安装apk.

微软的codepush

微软的codepush框架操作原理是这样：

（1）把react中的js打包，生成一个app（react-native官方就支持到这一步）
（2）把最新的js包都打包上传到微软的服务器（codepush框架实现）
（3）在app中判断本地js包的版本号和微软服务器的版本号，然后全部下载下来后实现更新(codepush框架实现)

codepush.sync(paramas)可以实现更新，一般我们放在app启动的时候进行。或者可以在APP中增加一个按钮，点击就运行更新。

实践步骤（Windows）

可以follow官网SOP，也可以参考下面的步骤。

Install the CodePush CLI

CLI用来管理account. 安装命令：
```
npm install -g code-push-cli
```
Create a CodePush account

用微软账号或GitHub 注册CodePush账号
```
code-push register
```
其他命令：
- code-push login 登录
- code-push whoami 查看登录
- code-push logout 登出
- code-push session ls 查看session
- code-push session rm 清除session
注册your app
```
注册命令：code-push app add MyApp 
```
注册命令会产生两个key: Staging and Production，可以用”code-push deployment ls codepushdemo -k”查看

MyApp是你app的名称，其他常用命令如下：

code-push app ls 列出注册的apps

code-push app rm 移除注册app

code-push app rename 重名注册app

app中配置configuration（以RN为例，Android）

安装插件codepush和link

npm install --save react-native-code-push@latest
rnpm link react-native-code-push （需要先安装rnpm: npm i -g rnpm。命令执行时输入步骤2的key）

android/app/build.gradle 中添加codepush.gradle

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

配置plugin-CodePush

MainApplication.java中添加（For React Native >= v0.29）

...
// 1. Import the plugin class.
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();
        }

        @Override
        protected List<ReactPackage> getPackages() {
            // 3. Instantiate an instance of the CodePush runtime and add it to the list of
            // existing packages, specifying the right deployment key. If you don't already
            // have it, you can run "code-push deployment ls <appName> -k" to retrieve your key.
            return Arrays.<ReactPackage>asList(
                new MainReactPackage(),
                new CodePush(BuildConfig.CODEPUSH_KEY, MainApplication.this, BuildConfig.DEBUG)
            );
        }
    };
}

build config : build.gradle file (android/app/build.gradle）

android {
…
buildTypes {
debug {
…
buildConfigField “String”, “CODEPUSH_KEY”, ‘””’
…
}
```
    release {
        ...
        buildConfigField "String", "CODEPUSH_KEY", '"<INSERT_PRODUCTION_KEY>"'
        ...
    }
}
...
```
}

如果有安装rnpm，也可以用react-native link react-native-code-push 步骤4（rn > 0.27)

app中配置升级处理code

sample code

详见：JavaScript API Reference
Release an app update （ReactNative）

code-push release-react

其他发布命令

Sample Code

注意事项：

deployment

注册CodePush service, 默认会有产生两个deployment： Staging and Production. （阶段和产品）

如果需要其他部署，可以自己添加管理：Deployment Management

列出所有deployment: code-push deployment ls [–displayKeys|-k]