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 Native中导航组件react-navigation跨tab路由处理详解
这篇文章主要给大家介绍了关于React Native中导航组件react-navigation跨tab路由处理的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。2017-10-10react native仿微信PopupWindow效果的实例代码
本篇文章主要介绍了react native仿微信PopupWindow效果的实例代码,具有一定的参考价值,有兴趣的可以了解一下2017-08-08React-RouterV6+AntdV4实现Menu菜单路由跳转的方法
这篇文章主要介绍了React-RouterV6+AntdV4实现Menu菜单路由跳转,主要有两种跳转方式一种是编程式跳转另一种是NavLink链接式跳转,每种方式通过实例代码给大家介绍的非常详细,需要的朋友可以参考下2022-08-08
最新评论