RN动态加载

react-native-dynamic-load

https://github.com/MrGaoGang/...

react-native dynamic load bundle from remote;

Support

• iOS/Android dynamic load jsbundle/common bundle;
• iOS/Android supports simultaneous loading of multiple bundles

实现逻辑

分包

如何进行分包？点击ReactNative 分包方案介绍

# ios运行

npm run build:ios

# android运行

npm run build:android

会自动进行分包，如果想要打包后的产物为数字类型，则在compile/metro-base.js中设置moduleIdByIndex=true即可

iOS 客户端动态加载

// 在应用启动的时候加载 jsbundle 基础包
[BridgeManager.instance loadBaseBundleWithLaunchOptions:launchOptions];

// 在需要的时候加载业务包
// 此处只是使用加载本地的bundle的方式，如果是在线的方式，可以先使用http下载然后加载本地
[BridgeManager.instance
    loadBusinessBundle:@"business.ios"
            moduleName:@"ReactNativeDynamic"
              callback:^(BOOL succeed) {
                if (succeed) {
                  RCTRootView *rootView = [[RCTRootView alloc]
                         initWithBridge:BridgeManager.instance.commonBridge
                             moduleName:@"ReactNativeDynamic"
                      initialProperties:nil];
                  self.view = rootView;
                }
  NSLog(@"%d",succeed);
              }];

Android 客户端动态加载

// 应用启动的时候
SoLoader.init(this, /* native exopackage */ false);
ReactAppRuntime.init(this);

// 你的activity
public class MainActivity  extends DynamicReactActivity {

  @Override
  protected RnBundle getBundle(){
    RnBundle bundle = new RnBundle();
    bundle.scriptType = ScriptType.ASSET;
    bundle.scriptPath = "business.android.bundle";
    bundle.scriptUrl = "business.android.bundle";
    bundle.appName = "ReactNativeDynamic";
    return bundle;
  }
}