关于react-native: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;
  }
}

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理