React Native中react-native-vector-icons/Ionicons图标不显示的问题求助

各位大佬好，我最近在做React Native项目的底部导航栏时遇到了个头疼的问题：用react-native-vector-icons库的Ionicons组件设置图标，结果图标根本显示不出来，取而代之的是带删除线的方块。我先把导航相关的代码贴出来，大家帮我看看是不是哪里写漏了？

import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Home from '../screens/home';
import Car from '../screens/Car';
import Services from '../screens/Services';
import Dialogs from '../screens/Dialogs';
import Profile from '../screens/Profile';
import Ionicons from 'react-native-vector-icons/Ionicons';

const Tab = createBottomTabNavigator();

export const HomeTabs = () => {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        headerShown: false,
        tabBarShowLabel: false,
        tabBarActiveTintColor: '#007AFF',
        tabBarInactiveTintColor: 'black',
        tabBarIcon: ({ focused, color, size}) => {
          let iconName;
          if (route.name === 'HomeTabs') {
            iconName = focused ? 'home' : 'home-outline';
          } else if (route.name === 'Car') {
            iconName = focused ? 'car' : 'car-outline';
          } else if (route.name === 'Services') {
            iconName = focused ? 'construct' : 'construct-outline';
          } else if (route.name === 'Dialogs') {
            iconName = focused ? 'chatbubble' : 'chatbubble-outline';
          } else if (route.name === 'Profile') {
            iconName = focused ? 'person' : 'person-outline';
          }
          return <Ionicons name={iconName} size={focused? 25: size} color={color} />;
        }
      })}
    >
      <Tab.Screen name="HomeTabs" component={Home} />
      <Tab.Screen name="Car" component={Car} />
      <Tab.Screen name="Services" component={Services} />
      <Tab.Screen name="Dialogs" component={Dialogs} />
        <Tab.Screen name="Profile" component={Profile} />
    </Tab.Navigator>
  );
} 

我反复检查了图标名称和导入路径，感觉没什么问题。后来我好奇去看了react-native-vector-icons包里Ionicons的类型文件，发现了这段代码：

import type { Icon } from './index';

export type IoniconsGlyphs = 'accessibility' | 'accessibility-outline' | 'accessibility-sharp' | 'add' | 'add-circle' | 'add-circle-outlin...

declare export default Class<Icon<IoniconsGlyphs>>;

同时控制台还报了几个TypeScript错误：

• TS7016: Could not find a declaration file for module './index'. 'C:/Users/Autoservice_front/node_modules/react-native-vector-icons/index.js' implicitly has an 'any' type.
• TS1120: An export assignment cannot have modifiers.
• TS2552: Cannot find name 'Class'. Did you mean 'CSS'?
• TS2714: The expression of an export assignment must be an identifier or qualified name in an ambient context.

我现在怀疑是这些类型文件的错误导致图标无法正常渲染？有没有朋友遇到过类似的情况？或者能帮我分析下问题到底出在哪，该怎么解决？

备注：内容来源于stack exchange，提问作者Артур