React Native 資源包拆分實戰(zhàn)分析
Native加載多個 JS Bundle
客戶端會先加載公共基礎(chǔ)包,加載完成后,再加載業(yè)務(wù)包。
安卓端加載多個 JS Bundle
先加載公共基礎(chǔ)包,安卓端需要在創(chuàng)建 ReactNativeHost 實例的時候重寫 getBundleAssetName()
方法或 getJSBundleFile()
方法,返回公共基礎(chǔ)包的本地路徑,然后再調(diào)用 ReactNativeHost實例的 getReactInstanceManager() 方法觸發(fā) ReactInstanceManager
實例的創(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ǔ)包后,會回調(diào)ReactInstanceManager
實例中注冊的所有 ReactInstanceEventListener
的onReactContextInitialized()
方法,可以在onReactContextInitialized()
回調(diào)方法中加載業(yè)務(wù)包。
通過使用上文中的 ReactInstanceManager
實例的 getCurrentReactContext()
獲取到當前的 ReactContext 上下文對象,再調(diào)用上下文對象的 getCatalystInstance()
方法獲取 CatalystInstance 實例,最終調(diào)用該實例的 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端加載多個 JS Bundle
先加載公共基礎(chǔ)包,iOS端可以使用 RCTBridge 的實例化方法 [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ǔ)包后,會發(fā)送 RCTJavaScriptDidLoadNotification 事件全局通知。
可以通過注冊監(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 資源包拆分實戰(zhàn)分析的詳細內(nèi)容,更多關(guān)于React Native 資源包拆分的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
關(guān)于react+antd樣式不生效問題的解決方式
最近本人在使用Antd開發(fā)時遇到些問題,所以下面這篇文章主要給大家介紹了關(guān)于react+antd樣式不生效問題的解決方式,文中通過圖文以及實例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07React框架快速實現(xiàn)簡易的Markdown編輯器
這篇文章主要為大家介紹了使用React框架實現(xiàn)簡易的Markdown編輯器,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-04-04React使用fullpage.js實現(xiàn)整屏翻頁功能
最近筆者在完成一個移動端小項目的過程中需要實現(xiàn)整屏翻頁的效果;調(diào)研完畢之后,最終決定使用pullPage.js實現(xiàn)此功能,fullPage.js使用起來比較方便,并且官網(wǎng)上也給了在react項目中使用的demo,本文記錄了這個第三方庫的使用過程,感興趣的朋友可以參考下2023-11-11react進階教程之異常處理機制error?Boundaries
在react中一旦出錯,如果每個組件去處理出錯情況則比較麻煩,下面這篇文章主要給大家介紹了關(guān)于react進階教程之異常處理機制error?Boundaries的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08React+Electron快速創(chuàng)建并打包成桌面應(yīng)用的實例代碼
這篇文章主要介紹了React+Electron快速創(chuàng)建并打包成桌面應(yīng)用,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-12-12