如何在React Native中传递Expo矢量图标类型和名称作为组件属性？

API 探路者

2026-7-18

解决React Native中传递Expo矢量图标类型作为组件属性的问题

首先，确保你的Expo项目已包含@expo/vector-icons依赖（Expo初始化项目默认自带该依赖），接下来可以通过以下两种方式实现需求：

方法一：创建图标组件映射表（推荐）

这种方式更可控，能按需导入所需图标集，减少包体积：

导入需要用到的图标组件：

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

建立图标类型与组件的映射关系：

const IconMap = {
  Feather,
  AntDesign,
  Ionicons
  // 可根据需求添加其他图标集，比如FontAwesome、MaterialIcons等
};

改造你的IconComponent组件：

const IconComponent = ({ iconType, iconName, size = 24, color = '#000' }) => {
  // 从映射表中获取对应图标组件
  const TargetIcon = IconMap[iconType];
  
  // 处理传入无效图标类型的情况，可返回null或默认图标
  if (!TargetIcon) return null;
  
  return <TargetIcon name={iconName} size={size} color={color} />;
};

之后就能按照你的预期调用组件：

<IconComponent iconType='Feather' iconName='bell' size={24} />
<IconComponent iconType='AntDesign' iconName='mail' size={24} color='#2563eb' />

方法二：全量导入图标集（不推荐生产环境）

如果需要支持大量图标集且不想手动逐个导入，可以采用全量导入，但会增加包体积，且类型提示不够友好：

import * as AllIcons from '@expo/vector-icons';

const IconComponent = ({ iconType, iconName, size = 24, color = '#000' }) => {
  const TargetIcon = AllIcons[iconType];
  if (!TargetIcon) return null;
  return <TargetIcon name={iconName} size={size} color={color} />;
};