React lazy加载错误，如何解决？

Question

React Native项目，使用React Navigation导航，导航信息放置在router.js中

router.js:

import React from 'react';

const IndexPage = React.lazy(() => import('../pages/indexPage'));
const SettingPage = React.lazy(() => import('../pages/settingPage'));

export default [
  {
    name: '主页',
    path: 'home',
    icon: 'home',
    component: IndexPage,
  },
  {
    name: '设置',
    path: 'setting',
    icon: 'settings',
    component: SettingPage,
  },
];

接下来，App.js中使用React Navigation
App.js：

import React from 'react';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {NavigationContainer} from '@react-navigation/native';
import Ionicons from 'react-native-vector-icons/Ionicons';
import routers from './src/routers';

const App: () => Node = () => {
  const Tab = createBottomTabNavigator();
  const tabScreen = () =>
    routers.map(r => (
      <Tab.Screen
        key={r.name}
        name={r.name}
        component={r.component}
        options={{
          title: r.name,
          tabBarIcon: ({color, size}) => (
            <Ionicons name={r.icon} color={color} size={size} />
          ),
          lazy: true,
        }}
      />
    ));

  return (
    <NavigationContainer>
      <Tab.Navigator>{tabScreen()}</Tab.Navigator>
    </NavigationContainer>
  );
};

export default App;

App.js中通过Map方法循环生成<Tab.Screen>，其中的component为router.js中导出数组中component设置的，通过React.lazy导入。

最后呈现效果中，底部导航栏第一个导航不显示页面，其他页面显示：
第一个导航点击效果：

第二个导航点击效果：

这个问题该怎么解决？