React Native封装可复用图标组件遇TypeScript传参类型错误

问题分析 #

你遇到两个核心错误：

1. FAB icon属性类型不匹配：直接在icon属性中写多组条件判断的JSX，且写法错误生成了不符合要求的对象结构，和FAB组件期望的icon类型（图标名称、ImageSource或渲染函数）不兼容。
2. 图标名称类型不兼容：Props中iconName定义为string，但每个@expo/vector-icons组件的name属性是各自的联合类型（比如Entypo的name只能是它支持的特定图标名称），string无法赋值给这些精确的联合类型。

解决方案 #

步骤1：修正类型定义 #

通过联合类型、泛型和条件类型，让iconType和iconName的类型严格对应，确保TypeScript能正确校验：

• 定义图标类型的联合类型，限制只能传入支持的图标库
• 用条件类型让iconName的类型匹配对应图标库的合法名称

步骤2：重构组件逻辑 #

用映射对象替代重复的条件判断，通过iconType直接获取对应的图标组件，并使用函数返回JSX的方式满足FAB的icon属性要求。

修改后的完整代码 #

import { StyleSheet, View } from 'react-native'
import React from 'react'
import { FAB, Badge } from 'react-native-paper'
import { Ionicons, MaterialIcons, MaterialCommunityIcons, Entypo } from '@expo/vector-icons';

// 定义支持的图标库类型
type IconType = 'Entypo' | 'Ionicons' | 'MaterialCommunityIcons' | 'MaterialIcons';

// 映射图标类型到对应的组件
const IconComponents: Record<IconType, React.ComponentType<any>> = {
  Entypo,
  Ionicons,
  MaterialCommunityIcons,
  MaterialIcons,
};

// 根据图标类型获取对应的合法图标名称类型
type IconName<T extends IconType> = 
  T extends 'Entypo' ? keyof typeof Entypo.glyphMap :
  T extends 'Ionicons' ? keyof typeof Ionicons.glyphMap :
  T extends 'MaterialCommunityIcons' ? keyof typeof MaterialCommunityIcons.glyphMap :
  T extends 'MaterialIcons' ? keyof typeof MaterialIcons.glyphMap :
  never;

// 泛型Props，确保iconName和iconType严格对应
type Props<T extends IconType> = {
  iconType: T;
  iconName: IconName<T>;
  iconSize: number;
  badgeLabel: string;
  badgeVisibility: boolean;
};

export const ThoughtsIcons = <T extends IconType>({ 
  iconType, 
  iconName, 
  iconSize, 
  badgeLabel, 
  badgeVisibility 
}: Props<T>) => {
  const IconComponent = IconComponents[iconType];
  
  return (
    <View>
      <FAB
        style={styles.iconStyle}
        // 用函数返回图标组件，符合FAB的icon属性要求
        icon={() => <IconComponent name={iconName} size={iconSize} />}
      />
      <Badge visible={badgeVisibility} style={styles.badgeStyle}>
        {badgeLabel}
      </Badge>
    </View>
  );
};

// 示例样式
const styles = StyleSheet.create({
  iconStyle: {
    position: 'absolute',
    bottom: 16,
    right: 16,
  },
  badgeStyle: {
    position: 'absolute',
    top: -4,
    right: -4,
  },
});

关键修复点说明 #

• 解决类型不匹配：泛型Props确保传入的iconName必须是iconType对应图标库的合法名称，TypeScript会在编译阶段提示错误，避免传入无效图标名称。
• 简化组件逻辑：用IconComponents映射对象替代重复的条件判断，代码更简洁易维护。
• 符合FAB的icon要求：通过函数返回JSX的方式，满足FAB组件icon属性接受的渲染函数类型，避免直接传入JSX导致的类型错误。

内容的提问来源于stack exchange，提问作者WizzyOlammie