BottomNavigation在React Native中不显示@expo/矢量图标

import React from 'react';
import { BottomNavigation, Text } from 'react-native-paper';
import Icon from '@expo/vector-icons/Ionicons';

const HomeIcon = () => <Icon name="home" size={24} color="black" />;
const SettingsIcon = () => <Icon name="settings" size={24} color="black" />;

const MyComponent = () => {
  const [index, setIndex] = React.useState(0);
  const [routes] = React.useState([
    { key: 'home', title: 'Home', icon: HomeIcon },
    { key: 'settings', title: 'Settings', icon: SettingsIcon },
  ]);

  const renderScene = BottomNavigation.SceneMap({
    home: () => <Text>Home Screen</Text>,
    settings: () => <Text>Settings Screen</Text>,
  });

  return (
    <BottomNavigation
      navigationState={{ index, routes }}
      onIndexChange={setIndex}
      renderScene={renderScene}
      shifting={true}
      labeled={false}
    />
  );
};

export default MyComponent;