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

Question

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

我导入像 and 一样的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