React Native 资源包拆分实践(二)

计算机软件开发 · 2024-9-26 06:57:24

Native加载多个 JS Bundle

客户端会先加载公共根本包，加载完成后，再加载业务包。
安卓端加载多个 JS Bundle

先加载公共根本包，安卓端须要在创建 ReactNativeHost 实例的时间重写 getBundleAssetName()方法或 getJSBundleFile()方法，返回公共根本包的当地路径，然后再调用 ReactNativeHost实例的 getReactInstanceManager() 方法触发  ReactInstanceManager实例的创建，末了调用 createReactContextInBackground()方法来触发 ReactNative 的初始化流程。
// 安卓端代码示例 - 加载公共根本包ReactNativeHost RNHost = new ReactNativeHost(application) {  @Nullable @Override protected String getBundleAssetName() { return "Assets目次下的common.android.bundle路径";  }  @Nullable @Override protected String getJSBundleFile() { return "当地磁盘中的common.android.bundle路径";  }}ReactInstanceManager bridge = RNHost.getReactInstanceManager();if (!bridge.hasStartedCreatingInitialContext()) {  bridge.createReactContextInBackground();}安卓端ReactNative在加载完公共根本包后，会回调ReactInstanceManager 实例中注册的全部 ReactInstanceEventListener 的onReactContextInitialized()方法，可以在onReactContextInitialized()回调方法中加载业务包。
通过利用上文中的 ReactInstanceManager 实例的 getCurrentReactContext()获取到当前的 ReactContext  上下文对象，再调用上下文对象的 getCatalystInstance()方法获取 CatalystInstance 实例，终极调用该实例的 loadScriptFromFile() 方法完成业务包的加载。
// 安卓端代码示例 - 加载业务包ReactContext context = RNHost.getReactInstanceManager().getCurrentReactContext();CatalystInstance catalyst = context.getCatalystInstance();String fileName = "当地业务包business.android.bundle路径"catalyst.loadScriptFromFile(fileName, fileName, false);iOS端加载多个 JS Bundle

先加载公共根本包，iOS端可以利用 RCTBridge 的实例化方法 [RCTBridge initWithBundleURL: moduleProvider: launchOptions:]，传入公共根本包的当地路径。
// iOS端代码示例 - 加载公共根本包NSURL *commonBundleURL = [[NSBundle mainBundle] URLForResource

"common" withExtension

"ios.bundle"];//公共根本包路径RCTBridge *bridge = [[RCTBridge alloc] initWithBundleURL:commonBundleURL moduleProvider:nil launchOptions:launchOptions];iOS端ReactNative在加载完公共根本包后，会发送 RCTJavaScriptDidLoadNotification 变乱全局关照。
可以通过注册监听 RCTJavaScriptDidLoadNotification 变乱，然后加载业务包，可以利用RCTCxxBridge 的 executeSourceCode()方法来加载。这里须要留意的是： executeSourceCode() 方法是 RCTCxxBridge的私有方法。可以用过 Category 的方式将executeSourceCode()方法暴袒露来。
// iOS端代码示例 - Category袒露私有方法@interface RCTBridge (MyCustomerBridge) - (void)executeSourceCode

NSData *)sourceCode sync

BOOL)sync;@end// iOS端代码示例 - 加载业务包NSURL *businessBundleURL = [[NSBundle mainBundle] URLForResource

"business" withExtension

"ios.bundle"];//业务包路径NSError *error = nil;NSData *sourceData = [NSData dataWithContentsOfURL:businessBundleURL options:NSDataReadingMappedIfSafe error:&error];if (error) { return }[bridge.batchedBridge executeSourceCode:sourceData sync:NO];

React Native 资源包拆分实践(二)

所属分类: 问答交流

新帖推荐: 30日

推荐作品