React Native带你一步步实现热更新（CodePush-Android）

最新推荐文章于 2025-06-09 09:06:01 发布

vv_小虫

最新推荐文章于 2025-06-09 09:06:01 发布

阅读量2.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： RN学习笔记

本文链接：https://blog.youkuaiyun.com/vv_bug/article/details/78105269

本文介绍了如何使用CodePush在React Native Android应用中实现热更新，包括安装CodePush、创建账号、注册应用、配置Android开发环境、集成React Native环境、发布jsbundle以及解决常见问题。通过示例代码展示了热更新的过程。

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

前言：无奈研究了一下CodePush，遇到了很多坑～～但是原理呢不是很难理解，就是配置有点多，原理可以简单的参考一下我之前的一篇博客React-Native 热更新尝试（Android），下面说一下期间遇到的坑～

大家可以看一下官网：https://github.com/Microsoft/react-native-code-push，

如果觉得自己英文不太好的话可以看一下这哥们的博客：
React Native热更新部署/热更新-CodePush最新集成总结(新)

下面带大家一步一步实现一下传说中的rn热更新：

首先我们创建一个rn项目叫UpdateDemo,然后运行android：

这里写图片描述

好啦！很干净的一个app（不要在问我怎么创建和运行rn了）～～

开始之前小伙伴可以自己去看看CodePush做一个简单的了解，然后你需要的是一台mac电脑～

一、安装 CodePush

进入命令栏执行：

npm install -g code-push-cli

然后短暂等待一会：

这里写图片描述

二、创建一个CodePush账号，并登入

执行在命令栏里执行：

code-push register

然后会弹出一个注册页面，我们直接github登入，登入成功后会显示你的access-key，我们直接copy一下：

这里写图片描述

然后复制到命令栏中：

这里写图片描述

可以看到，我们已经成功的登入了～～

三、在CodePush注册一个我们的app

我们在终端输入:

code-push app add <appname> android react-native

这里写图片描述

我们这里是以android为例子的～～

然后我们把Production和Staging对应的可以copy一下，后面需要用到～～

四、集成Android开发环境

1、进入到项目个根目录然后执行：

npm install --save react-native-code-push

这里写图片描述

然后短暂停留几秒～～～

2、进到android目录，然后执行：

npm i -g rnpm

这里写图片描述

3、回到项目根目录，直接命令集成android环境：

rnpm link react-native-code-push

这里写图片描述

一路回车～～～～

然后用　AndroidStudio 打开android项目，找到/xxxx/UpdateDemo/android/app/build.gradle，你会发现多了几行代码：

compile project(':react-native-code-push')
apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"

这里写图片描述

这就是脚本文件为我们自动生成的，然后/xxx/UpdateDemo/android/settings.gradle这个文件也多了几行代码：

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

最后我们点击重新编译app：

这里写图片描述

点击”Sync Now”~~

然后我们试着运行app，你会发现报了一个不明的错误，我们继续找到/xxx/UpdateDemo/android/app/src/main/java/com/updatedemo/MainApplication.java文件：

package com.updatedemo;

import android.app.Application;

import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;
import com.microsoft.codepush.react.CodePush;

import java.util.Arrays;
import java.util.List;

public class MainApplication extends Application implements ReactApplication {
   
   

    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {

        @Override
        protected String getJSBundleFile() {
            return CodePush.getJSBundleFile();
        }

        @Override
        public boolean getUseDeveloperSupport() {