@世博/矢量-图标Ionicons名称支柱TypeScript错误

Question

使用@expo/向量图标13.0.0 Ionicons变体，我需要动态设置图标名，但是名称支柱引发TS错误：

TS2322:键入'string‘不能键入’“导航”、“搜索”、“重复”、“\x”、“链接”、“重复”、“通知”、“通知”、“循环体”、“代码”、“\x”、“映射”、“\”菜单、“\、\”、“\”\、\、\{e76f}\{e76f}\{e76f}\x{e76f}\{e76f}\x{e76f}\\{e76f}

<Ionicons
  name={activeButton === buttonName ? icon.replace('-outline', '') : icon}
  color={
    activeButton !== buttonName
      ? Constants?.manifest?.extra?.tabBarButtonColor
      : Constants?.manifest?.extra?.tabBarButtonActiveColor
  }
  size={24}
/>

如何将name={activeButton === buttonName ? icon.replace('-outline', '') : icon}设置为TS名称类型？

谢谢!

编辑1:稍微修改代码以澄清问题

const iconName: ComponentProps<typeof Ionicons>['name'] =
  activeButton === buttonName ? icon.replace('-outline', '') : icon; // <-- this gives the same error

<Ionicons
  name={iconName}
  color={
    activeButton !== buttonName
      ? Constants?.manifest?.extra?.tabBarButtonColor
      : Constants?.manifest?.extra?.tabBarButtonActiveColor
  }
  size={24}
/>

Answer 1

给你的图标变量类型如下：

const icon: React.ComponentProps<typeof MaterialCommunityIcons>['name'] = 'add-outline'