使用 React Native Router Flux 延迟加载屏幕

Question

我的 React Native 应用程序中有几个屏幕。

我正在使用 React Native 0.56 和 React Native Router Flux。

有没有办法让屏幕在实际需要时加载其所有导入，而不是在启动应用程序和解析捆绑包时加载？

因此，应用程序的初始加载时间正在增加。

我在 React Native 性能部分遇到了 RAM 格式。 https://facebook.github.io/react-native/docs/next/performance.html#enable-the-ram-format

如何减少 loadedModuleNames 中的模块数量？？

index.android.js

import { AppRegistry } from 'react-native';
import AppContainer from './src/';

const modules = require.getModules();
const moduleIds = Object.keys(modules);
const loadedModuleNames = moduleIds
  .filter(moduleId => modules[moduleId].isInitialized)
  .map(moduleId => modules[moduleId].verboseName);
const waitingModuleNames = moduleIds
  .filter(moduleId => !modules[moduleId].isInitialized)
  .map(moduleId => modules[moduleId].verboseName);

// make sure that the modules you expect to be waiting are actually waiting
console.log(
  'loaded:',
  loadedModuleNames.length,
  'waiting:',
  waitingModuleNames.length
);

// grab this text blob, and put it in a file named packager/modulePaths.js
console.log(`module.exports = ${JSON.stringify(loadedModuleNames.sort())};`);

AppRegistry.registerComponent('Roots', () => AppContainer);

navigation/index.js

/**
 * App Navigation
 *
 */
import React from 'react';
import { Actions, Scene, ActionConst, Stack } from 'react-native-router-flux';

// Consts and Libs
import { AppConfig } from '@constants/';

// Components

// Scenes
import Placeholder from '@components/general/placeholder/index';
import ExperiencesScenes from '@navigation/experiences';

import AuthScenes from '@navigation/auth';
import MediateScene from '@navigation/mediate';
import HomeScene from '@navigation/home';
import SearchScene from '@navigation/search';
import NoticesScene from '@navigation/notices';
// import ShortlistedMapScene from '@navigation/shortlisted_map';

import IntroScene from '@navigation/intro';
import AssistantScene from '@navigation/assistant';
import NotificationSettingsScene from '@navigation/notification_settings';
import HighlightScene from '@navigation/highlight';
import TransportScene from '@navigation/transport';
import HelpScene from '@navigation/help';
import FaqScene from '@navigation/faq';
import DynamicListScene from '@navigation/component_list';
import BrandCoverScene from '@navigation/brand_cover';
import ListingsScene from '@navigation/listings';
import ShorlistedScene from '@navigation/shortlisted_list';
import SettingsScene from '@navigation/settings';
import OnTheWayScene from '@navigation/on_the_way';
import ItinerariesScene from '@navigation/itineraries';
import TempScene from '@navigation/temp';
import TipsScene from '@navigation/tips';
import SimpleSwipe from '@navigation/simple_swipe';
import Cities from '@navigation/cities';
// import ReferralScene from '@navigation/referral';

/* Routes ==================================================================== */
export default Actions.create(
    <Stack key={'root'}>

        {MediateScene}

        {IntroScene}

        {HomeScene}

        {AssistantScene}

        {SearchScene}

        {NoticesScene}

        {ShorlistedScene}

        {SettingsScene}

        {ListingsScene}

        {TipsScene}

        {BrandCoverScene}

        {AuthScenes}

        {ExperiencesScenes}

        {NotificationSettingsScene}

        {HighlightScene}

        {TransportScene}

        {HelpScene}

        {FaqScene}

        {DynamicListScene}

        {OnTheWayScene}

        {ItinerariesScene}

        {SimpleSwipe}

        {Cities}
    </Stack>
);

导航代码类似于此

import React from 'react';
import { Scene, ActionConst } from 'react-native-router-flux';

// Consts and Libs
import { AppConfig } from '@constants/';
import { AppStyles, AppSizes, AppColors } from '@theme/';
// Scenes
import BrandCoverScreen from '@screens/brand_cover/index';


const navbarPropsTabs = {
    ...AppConfig.navbarProps,
    hideNavBar: true,
};

/* Routes ==================================================================== */
const scenes = (
    <Scene 
        {...navbarPropsTabs}
        key={"brand_cover"} 
        component={BrandCoverScreen} >
    </Scene>
);

export default scenes;

Answer 1

这看起来有点复杂 - 而且它与 react-native-router-flux 无关 - 它需要 metro 的支持才能将 JS 捆绑器拆分成更小的部分并将其加载到正确的方式。

似乎 Expo 可能会对资产做类似的事情，但对于 JS 代码，我只看到一些接近它的东西破解了这篇文章中的 react-native 代码：

Karan Thakkar 在 React Native 中延迟捆绑加载 https://medium.com/react-native-training/lazy-bundle-loading-in-react-native-5f717b65482a

这里是 GitHub 存储库，其中包含文章中使用的代码： https://github.com/karanjthakkar/RNLazyBundleLoading

以防文章或存储库下线，这是他在文章中也显示的差异（这是原始 react-native 和他的分支之间的差异：

diff --git a/React/Base/RCTBridge+Private.h b/React/Base/RCTBridge+Private.h
index 1995801ffcaa..cf1609bc9614 100644
--- a/React/Base/RCTBridge+Private.h
+++ b/React/Base/RCTBridge+Private.h
@@ -90,6 +90,12 @@ RCT_EXTERN void RCTVerifyAllModulesExported(NSArray *extraModules);
  */
 - (void)start;

+/**
+ * Called on the child bridge to run the executor and start loading
+ * the partial bundle
+ */
+- (void)lazyStart;
+
 /**
  * Used by RCTModuleData to register the module for frame updates after it is
  * lazily initialized.
diff --git a/React/Base/RCTBridge.h b/React/Base/RCTBridge.h
index 5222a15b5ca7..d0be4652f4f5 100644
--- a/React/Base/RCTBridge.h
+++ b/React/Base/RCTBridge.h
@@ -223,4 +223,9 @@ RCT_EXTERN NSString *RCTBridgeModuleNameForClass(Class bridgeModuleClass);
  */
 - (BOOL)isBatchActive;

+/**
+ * Load a custom bundle into an existing bridge instance
+ */
+- (void)loadCustomBundle:(NSString *)bundleName;
+
 @end
diff --git a/React/Base/RCTBridge.m b/React/Base/RCTBridge.m
index cee9aa0463e1..c1b3ae107599 100644
--- a/React/Base/RCTBridge.m
+++ b/React/Base/RCTBridge.m
@@ -319,6 +319,13 @@ - (void)setUp
   RCT_PROFILE_END_EVENT(RCTProfileTagAlways, @"");
 }

+-(void)loadCustomBundle:(NSString *)bundleName
+{
+  _bundleURL = [NSBundle.mainBundle URLForResource:bundleName withExtension:@"jsbundle"];
+
+  [self.batchedBridge lazyStart];
+}
+
 - (BOOL)isLoading
 {
   return self.batchedBridge.loading;
diff --git a/React/CxxBridge/RCTCxxBridge.mm b/React/CxxBridge/RCTCxxBridge.mm
index 4b7aaf375e5b..32df68ac43ec 100644
--- a/React/CxxBridge/RCTCxxBridge.mm
+++ b/React/CxxBridge/RCTCxxBridge.mm
@@ -382,6 +382,29 @@ - (void)start
   RCT_PROFILE_END_EVENT(RCTProfileTagAlways, @"");
 }

+- (void)lazyStart
+{
+  __weak RCTCxxBridge *weakSelf = self;
+
+  __block NSData *sourceCode;
+  [self loadSource:^(NSError *error, RCTSource *source) {
+    if (error) {
+      [weakSelf handleError:error];
+    }
+
+    sourceCode = source.data;
+    RCTCxxBridge *strongSelf = weakSelf;
+    if (sourceCode) {
+      [strongSelf executeSourceCode:sourceCode sync:NO];
+    }
+  } onProgress:^(RCTLoadingProgress *progressData) {
+#if RCT_DEV && __has_include("RCTDevLoadingView.h")
+    RCTDevLoadingView *loadingView = [weakSelf moduleForClass:[RCTDevLoadingView class]];
+    [loadingView updateProgress:progressData];
+#endif
+  }];
+}
+
 - (void)loadSource:(RCTSourceLoadBlock)_onSourceLoad onProgress:(RCTSourceLoadProgressBlock)onProgress
 {
   NSNotificationCenter *center = [NSNotificationCenter defaultCenter];

使用 React Native Router Flux 延迟加载屏幕

Lazy Load screens with React Native Router Flux

react-native

react-native-router-flux