React Native 資源包拆分實(shí)戰(zhàn)分析
Native加載多個(gè) JS Bundle
客戶端會(huì)先加載公共基礎(chǔ)包,加載完成后,再加載業(yè)務(wù)包。
安卓端加載多個(gè) JS Bundle
先加載公共基礎(chǔ)包,安卓端需要在創(chuàng)建 ReactNativeHost 實(shí)例的時(shí)候重寫 getBundleAssetName()
方法或 getJSBundleFile()
方法,返回公共基礎(chǔ)包的本地路徑,然后再調(diào)用 ReactNativeHost實(shí)例的 getReactInstanceManager() 方法觸發(fā) ReactInstanceManager
實(shí)例的創(chuàng)建,最后調(diào)用 createReactContextInBackground()
方法來觸發(fā) ReactNative 的初始化流程。
// 安卓端代碼示例 - 加載公共基礎(chǔ)包 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在加載完公共基礎(chǔ)包后,會(huì)回調(diào)ReactInstanceManager
實(shí)例中注冊(cè)的所有 ReactInstanceEventListener
的onReactContextInitialized()
方法,可以在onReactContextInitialized()
回調(diào)方法中加載業(yè)務(wù)包。
通過使用上文中的 ReactInstanceManager
實(shí)例的 getCurrentReactContext()
獲取到當(dāng)前的 ReactContext 上下文對(duì)象,再調(diào)用上下文對(duì)象的 getCatalystInstance()
方法獲取 CatalystInstance 實(shí)例,最終調(diào)用該實(shí)例的 loadScriptFromFile()
方法完成業(yè)務(wù)包的加載。
// 安卓端代碼示例 - 加載業(yè)務(wù)包 ReactContext context = RNHost.getReactInstanceManager().getCurrentReactContext(); CatalystInstance catalyst = context.getCatalystInstance(); String fileName = "本地業(yè)務(wù)包business.android.bundle路徑" catalyst.loadScriptFromFile(fileName, fileName, false);
iOS端加載多個(gè) JS Bundle
先加載公共基礎(chǔ)包,iOS端可以使用 RCTBridge 的實(shí)例化方法 [RCTBridge initWithBundleURL: moduleProvider: launchOptions:]
,傳入公共基礎(chǔ)包的本地路徑。
// iOS端代碼示例 - 加載公共基礎(chǔ)包 NSURL *commonBundleURL = [[NSBundle mainBundle] URLForResource:@"common" withExtension:@"ios.bundle"];//公共基礎(chǔ)包路徑 RCTBridge *bridge = [[RCTBridge alloc] initWithBundleURL:commonBundleURL moduleProvider:nil launchOptions:launchOptions];
iOS端ReactNative在加載完公共基礎(chǔ)包后,會(huì)發(fā)送 RCTJavaScriptDidLoadNotification 事件全局通知。
可以通過注冊(cè)監(jiān)聽 RCTJavaScriptDidLoadNotification
事件,然后加載業(yè)務(wù)包,可以使用RCTCxxBridge
的 executeSourceCode()
方法來加載。
這里需要注意的是: executeSourceCode()
方法是 RCTCxxBridge
的私有方法。可以用過 Category
的方式將executeSourceCode()
方法暴露出來。
// iOS端代碼示例 - Category暴露私有方法 @interface RCTBridge (MyCustomerBridge) - (void)executeSourceCode:(NSData *)sourceCode sync:(BOOL)sync; @end // iOS端代碼示例 - 加載業(yè)務(wù)包 NSURL *businessBundleURL = [[NSBundle mainBundle] URLForResource:@"business" withExtension:@"ios.bundle"];//業(yè)務(wù)包路徑 NSError *error = nil; NSData *sourceData = [NSData dataWithContentsOfURL:businessBundleURL options:NSDataReadingMappedIfSafe error:&error]; if (error) { return } [bridge.batchedBridge executeSourceCode:sourceData sync:NO];
以上就是React Native 資源包拆分實(shí)戰(zhàn)分析的詳細(xì)內(nèi)容,更多關(guān)于React Native 資源包拆分的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
- ReactNative點(diǎn)擊事件.bind(this)操作分析
- ReactNative集成個(gè)推消息推送過程詳解
- React?Native與iOS?OC之間的交互示例詳解
- React?Native項(xiàng)目設(shè)置路徑別名示例
- 一文詳解ReactNative狀態(tài)管理rematch使用
- 一文詳解ReactNative狀態(tài)管理redux-toolkit使用
- ReactNative?狀態(tài)管理redux使用詳解
- react?native?reanimated實(shí)現(xiàn)動(dòng)畫示例詳解
- React Native按鈕Touchable系列組件使用教程示例
相關(guān)文章
關(guān)于react+antd樣式不生效問題的解決方式
最近本人在使用Antd開發(fā)時(shí)遇到些問題,所以下面這篇文章主要給大家介紹了關(guān)于react+antd樣式不生效問題的解決方式,文中通過圖文以及實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07在React中強(qiáng)制重新渲染的4 種方式案例代碼
這篇文章主要介紹了在React中強(qiáng)制重新渲染的4 種方式,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-12-12一文詳解React Redux設(shè)計(jì)思想與工作原理
最近看項(xiàng)目中使用了?Redux,?便嘗試了解一波?Redux?的設(shè)計(jì)思想與工作原理,所以本文詳細(xì)的給大家介紹了Redux設(shè)計(jì)思想與工作原理,需要的朋友可以參考下2023-09-09React框架快速實(shí)現(xiàn)簡(jiǎn)易的Markdown編輯器
這篇文章主要為大家介紹了使用React框架實(shí)現(xiàn)簡(jiǎn)易的Markdown編輯器,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-04-04React使用fullpage.js實(shí)現(xiàn)整屏翻頁功能
最近筆者在完成一個(gè)移動(dòng)端小項(xiàng)目的過程中需要實(shí)現(xiàn)整屏翻頁的效果;調(diào)研完畢之后,最終決定使用pullPage.js實(shí)現(xiàn)此功能,fullPage.js使用起來比較方便,并且官網(wǎng)上也給了在react項(xiàng)目中使用的demo,本文記錄了這個(gè)第三方庫的使用過程,感興趣的朋友可以參考下2023-11-11react進(jìn)階教程之異常處理機(jī)制error?Boundaries
在react中一旦出錯(cuò),如果每個(gè)組件去處理出錯(cuò)情況則比較麻煩,下面這篇文章主要給大家介紹了關(guān)于react進(jìn)階教程之異常處理機(jī)制error?Boundaries的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08React+Electron快速創(chuàng)建并打包成桌面應(yīng)用的實(shí)例代碼
這篇文章主要介紹了React+Electron快速創(chuàng)建并打包成桌面應(yīng)用,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-12-12