在ReactNative中使用CodePush 热更新

ReactNative 热更新

使用 react-native-update,这个库是在 RN 中文网上推广的。鉴于测试、使用改库,我们还可以自建 codepush服务,不过这个后面会详细讲到,官网地址。
基础环境

1. 全局安装 update-cli

先全局安装命令行工具,每台电脑只用装一次

npm i -g react-native-update-cli

2. 项目初始化

然后在项目目录中安装热更新模块

0.71 及以上版本使用最新版本如下

npm i react-native-update

项目配置

IOS

找到 ios>AppDelegate.m 文件

// 修改以下内容

#import "RCTPushy.h"

- (NSURL *)getBundleURL
{
   
    #if DEBUG
    return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
#else
// 这里改为 RCTPushy bundleURL, 热更新
//  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
return [RCTPushy bundleURL];
    #endif
}

@end
ANDROID

MainApplication 中增加如下代码(如果是混编原生的项目或其他原因没有使用 ReactApplication,请使用此 api 集成):

● Kotlin 版本
// … 其它代码

// ↓↓↓请注意不要少了这句import
import cn.reactnative.modules.update.UpdateContext;
// ↑↑↑

class MainApplication : Application(), ReactApplication {
   
 
  override val reactNativeHost: ReactNativeHost =
      object : DefaultReactNativeHost(this) {
   
 
        // ↓↓↓将下面这一段添加到 DefaultReactNativeHost 内部!
        override fun getJSBundleFile(): String? {
   
          return UpdateContext.getBundleUrl(this@MainApplication)
        }
        // ↑↑↑
 
        // ...其他代码
      }
}

● Java版本

// ... 其它代码
 
// ↓↓↓请注意不要少了这句import
import cn.reactnative.modules.update.UpdateContext;
// ↑↑↑
 
public class MainApplication extends Application implements ReactApplication {
   
 
  private final ReactNativeHost mReactNativeHost =
    // 老版本 RN 这里可能是 new ReactNativeHost(this)
    new DefaultReactNativeHost(this) {
   
 
    // ↓↓↓将下面这一段添加到 DefaultReactNativeHost 内部!
    @Override
    

你可能感兴趣的:(ReactNative,react,native,react.js,javascript)