如何在DrawerNavigator中通过API显示菜单列表

import React from 'react';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { DrawerContentScrollView, DrawerItemList, DrawerItem } from '@react-navigation/drawer';

// 菜单数据源
const menuItems = [
  { name: '首页', icon: 'home', route: 'Home' },
  { name: '个人资料', icon: 'person', route: 'Profile' },
  { name: '设置', icon: 'settings', route: 'Settings' },
];

// 自定义的DrawerContent组件
const CustomDrawerContent = (props) => {
  return (
    <DrawerContentScrollView {...props}>
      <DrawerItemList {...props} />
      {menuItems.map((item, index) => (
        <DrawerItem
          key={index}
          label={item.name}
          icon={({ color, size }) => (
            <Icon name={item.icon} color={color} size={size} />
          )}
          onPress={() => props.navigation.navigate(item.route)}
        />
      ))}
    </DrawerContentScrollView>
  );
};

// 创建DrawerNavigator并使用自定义的DrawerContent组件
const Drawer = createDrawerNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Drawer.Navigator drawerContent={(props) => <CustomDrawerContent {...props} />}>
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="Profile" component={ProfileScreen} />
        <Drawer.Screen name="Settings" component={SettingsScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
};

export default App;