react native app with typescript，我试图通过props传递一个名称作为字符串，动态地创建使用@expo/vector-icons和Fontawesome或MaterialIcon的图标按钮。
我认为问题就在这里，但不知道如何解决。有什么想法？建议？也可以随意批评其他代码。
下面是接收name属性的IconButton组件

import { Ionicons, MaterialIcons, FontAwesome } from 
 "@expo/vector-icons";

const star = "star";

type Props = {
  name: keyof typeof MaterialIcons.glyphMap;
  color: string;
  onPress(): void;
};

export default function IconButton(props: Props) {
  return (
    <Ionicons.Button name={props.name} size={24} color={props.color} />
  );
}

字符串
Fontawesome expo vector expected properties
“名称”属性是这里的问题。
这段代码来自一个使用IconButton的屏幕，我将name作为字符串传递。

useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: () => {
        return (
          <IconButton
            onPress={headerButtonPressHandler}
            name="star"
            color="gray"
          />
        );
      },
    });
  }, [navigation, headerButtonPressHandler]);

型
name property error的

edit：更新代码，但name仍有错误

updated code的
this is where I use IconButton and pass in name的