React Native 资源包拆分实战分析
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 资源包拆分实战分析的详细内容,更多关于React Native 资源包拆分的资料请关注脚本之家其它相关文章!
相关文章
使用react-virtualized实现图片动态高度长列表的问题
一般我们在写react项目中,同时渲染很多dom节点,会造成页面卡顿, 空白的情况。为了解决这个问题,今天小编给大家分享一篇教程关于react-virtualized实现图片动态高度长列表的问题,感兴趣的朋友跟随小编一起看看吧2021-05-05
解决React报错React.Children.only expected to rece
这篇文章主要为大家介绍了React报错React.Children.only expected to receive single React element child分析解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-01-01
React通过redux-persist持久化数据存储的方法示例
这篇文章主要介绍了React通过redux-persist持久化数据存储的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2019-02-02


最新评论