React Native应用程序中有几个屏幕。
我正在使用React Native 0.56和React Native Router Flux。
是否有一种方法可以使屏幕在实际需要屏幕时加载所有导入内容，而不是在启动应用程序并分析捆绑包时加载它？
因此，应用程序的初始加载时间正在增加。
我在React Native Performance部分遇到了RAM格式。 https://facebook.github.io/react-native/docs/next/performance.html#enable-the-ram-format
如何减少loadingModuleNames中的模块数量？
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;
答案 0 :(得分：1)
那看起来似乎有点复杂-而且它仅与react-native-router-flux不相关-它需要metro的支持才能将JS捆绑器拆分为较小的块并将其正确地加载办法。
Expo似乎可以对资产做类似的事情，但是对于JS代码，我只看到接近它的东西在本文中入侵了react-native代码：
React Native中的懒包捆绑加载，Karan Thakkar 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];