React Native - 图标名称的 expo/vector-icons typescript 类型定义答案

【问题标题】：React Native - expo/vector-icons typescript type definition for icon nameReact Native - 图标名称的 expo/vector-icons typescript 类型定义
【发布时间】：2022-06-14 06:03:19
【问题描述】：

我正在尝试找出 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 收到错误消息。

【问题讨论】：

我想您可能会发现this question 很有帮助。 name 属性不是字符串，而是 glyphMap。

标签： typescript react-native

【解决方案1】：

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

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

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

icon: keyof typeof Ionicons.glyphMap

【讨论】：