React Native - 图标名称的 expo/vector-icons 打字稿类型定义

Question

我正在尝试找出 expo/vector-icons 图标名称的类型定义，因为我打算将其用于组件道具。

我导入expo/vector-icons，并且像这样定义界面道具，我尝试将图标名称输入为字符串。

import Icon from "@expo/vector-icons/FontAwesome"

interface Props {
    icon: string
    value: string
    placeholder: string
    onChangeText: (text: string) => void
    secureTextEntry?: boolean
    style: StyleProp<ViewStyle>
}

这就是我使用道具的方式。

<Icon name={icon} size={20} style={styles.icon} />

但是我从 Typescript 中收到错误。

Answer 1

你必须更改图标道具的类型，

import { Ionicons } from '@expo/vector-icons';

并使用 Ionicons 中的 glyphMap 属性，就像这样

icon: keyof typeof Ionicons.glyphMap

Answer 2

如果您想使用 Typescript 在自定义组件中使用多个 Expo 矢量图标作为道具。您可以执行以下操作

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


export enum IconType {
  MatetrialIcon,
  FontAweomseIcon,
  Ionicon,
}


type CustomProps = {
   icon: {
     value: { type: IconType.MatetrialIcon, name: keyof typeof MaterialIcons.glyphMap } |
            { type: IconType.FontAweomseIcon, name: keyof typeof FontAwesome.glyphMap } |
            { type: IconType.Ionicon, name: keyof typeof Ionicons.glyphMap };
     size: number;
   }
   
}


const CustomComponent = (props: CustomProps) => {
const { icon, ...otherProps } = props;

return 
  (
    <View style={styles.customIconStyle}>
      {icon.value.type === IconType.FontAweomseIcon && (
        <FontAwesome name={icon.value.name} size={icon.size} />
      )}
      {icon.value.type === IconType.MatetrialIcon && (
        <MaterialIcons name={icon.value.name} size={icon.size} />
      )}
      {icon.value.type === IconType.Ionicon && (
        <Ionicons name={icon.value.name} size={icon.size} />
      )}
    </View>
  );

}

Answer 3

首先从@expo/vertor-icons导入你想要的图标，

import Icon from "@expo/vector-icons/FontAwesome"

然后在类型定义中使用名为 glyphMap 的属性

interface Props {
  icon: keyof typeof Icon.glyphMap
  value: string
  placeholder: string
  onChangeText: (text: string) => void
  secureTextEntry?: boolean
  style: StyleProp<ViewStyle>
}

Answer 4

import Icon from "@expo/vector-icons/MaterialCommunityIcons";
import { ComponentProps } from "react";

type Props = ComponentProps<typeof Icon>;
export type IconName = Props["name"];