React Native BottomTabs初始屏幕懒加载异常：首页空白，其他正常

问题现象 #

在React Native应用的BottomTabNavigator中加入Suspense组件后，作为初始路由的HomeScreen无法显示，仅呈现空白背景，但其他屏幕（ExploreScreen、BlogScreen）均可正常展示。

原代码实现 #

const HomeScreen = lazy(() => import('../screens/HomeScreen'));
const ExploreScreen = lazy(() => import('../screens/ExploreScreen'));
const BlogScreen = lazy(() => import('../screens/BlogScreen'));

const BottomTabs = createBottomTabNavigator();

const BottomTabNavigator = () => {
  return (
    <Suspense
      fallback={
        <View>
          <Text style={{ color: 'red' }}>Loading screen...</Text>
        </View>
      }>
      <BottomTabs.Navigator
        initialRouteName="Home"
        screenOptions={{
          // ...其他配置
        }}>
        <BottomTabs.Screen
          name="Home"
          component={HomeScreen}
          options={{
            title: 'Home',
            tabBarLabel: 'Home',
            // ...其他配置
          }}
        />
        <BottomTabs.Screen
          name="Explore"
          component={ExploreScreen}
          options={{
            title: 'Explore',
            tabBarLabel: 'Explore',
            // ...其他配置
          }}
        />
        <BottomTabs.Screen
          name="Blog"
          component={ScheduleScreen}
          options={{
            title: 'Blog',
            tabBarLabel: 'Blog',
            // ...其他配置
          }}
        />
      </BottomTabs.Navigator>
    </Suspense>
  );
};

解决办法 #

1. 修正代码笔误 #

原代码中Blog对应的Screen组件写错为未定义的ScheduleScreen，这会导致渲染异常，先修正为正确的BlogScreen：

<BottomTabs.Screen
  name="Blog"
  component={BlogScreen} // 替换ScheduleScreen为BlogScreen
  options={{
    title: 'Blog',
    tabBarLabel: 'Blog',
    // ...其他配置
  }}
/>

2. 调整Suspense的位置 #

不要将Suspense包裹整个BottomTabs.Navigator，而是为每个懒加载的屏幕单独添加Suspense。可以创建一个通用的懒加载包装组件：

import { Suspense, View, Text } from 'react-native';
import { lazy } from 'react';

// 通用懒加载屏幕包装组件
const LazyLoadedScreen = (Component) => {
  return () => (
    <Suspense fallback={
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text style={{ color: 'red' }}>Loading screen...</Text>
      </View>
    }>
      <Component />
    </Suspense>
  );
};

// 懒加载各屏幕
const HomeScreen = lazy(() => import('../screens/HomeScreen'));
const ExploreScreen = lazy(() => import('../screens/ExploreScreen'));
const BlogScreen = lazy(() => import('../screens/BlogScreen'));

const BottomTabs = createBottomTabNavigator();

const BottomTabNavigator = () => {
  return (
    <BottomTabs.Navigator
      initialRouteName="Home"
      screenOptions={{
        // ...其他配置
      }}>
      <BottomTabs.Screen
        name="Home"
        component={LazyLoadedScreen(HomeScreen)}
        options={{
          title: 'Home',
          tabBarLabel: 'Home',
          // ...其他配置
        }}
      />
      <BottomTabs.Screen
        name="Explore"
        component={LazyLoadedScreen(ExploreScreen)}
        options={{
          title: 'Explore',
          tabBarLabel: 'Explore',
          // ...其他配置
        }}
      />
      <BottomTabs.Screen
        name="Blog"
        component={LazyLoadedScreen(BlogScreen)}
        options={{
          title: 'Blog',
          tabBarLabel: 'Blog',
          // ...其他配置
        }}
      />
    </BottomTabs.Navigator>
  );
};

3. 检查HomeScreen的路径与导出 #

确认../screens/HomeScreen的文件路径正确，且该组件使用默认导出（因为lazy默认加载模块的默认导出）。如果是命名导出，需要调整为：

const HomeScreen = lazy(() => import('../screens/HomeScreen').then(module => ({ default: module.HomeScreen })));

内容的提问来源于stack exchange，提问作者Arkadi