React Native BottomTabs 导航器不延迟加载初始屏幕

问题描述 投票:0回答:0

我刚刚在我的 React Native 应用程序中将

Suspense
添加到我的
BottomTabNavigator
中。问题是第一个屏幕 (HomeScreen) 没有显示 - 所有其他屏幕都显示。当我导航到主屏幕时,我只看到白色背景。

这是我的代码的样子:

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>
  );
};

有什么想法吗?

typescript react-native lazy-loading react-navigation-bottom-tab react-suspense
© www.soinside.com 2019 - 2024. All rights reserved.