如何在React-Native-Elements中使用AntDesign图标

Question

在React Native Elements中，有一个指向图标目录的链接。第一个库是AntDesign：截图

在类型中，他们说“类型（默认为material，选项为material-community、zocial、font-awesome、octicon、ionicon、foundation、evilicon、simple-line-icon、feather或entypo）”。这些中没有包括AntD。我尝试过type="ant-d"、type="antd"、type="ant-design"和type="antdesign"。由于这似乎非常简单，我希望浪费尽可能少的时间。我错过了什么吗？

这是我的代码片段，我已经添加了type：

render() {
  const { selectedIndex } = this.state
  const buttons = [
    { element: () => <Icon name="notification" type="ant-design" color={ selectedIndex === 0 ? colorsAndFonts.colors.redBalehu : colorsAndFonts.colors.warmGrey } /> },
    { element: () => <Icon name="credit-card" color={ selectedIndex === 1 ? colorsAndFonts.colors.redBalehu : colorsAndFonts.colors.warmGrey } /> },
    { element: () => <Icon name="account-circle" color={ selectedIndex === 2 ? colorsAndFonts.colors.redBalehu : colorsAndFonts.colors.warmGrey } /> },
    { element: () => <Icon name="camera-alt" onPress={ this.takePhoto } color={ selectedIndex === 3 ? colorsAndFonts.colors.redBalehu : colorsAndFonts.colors.warmGrey } /> },
    { element: () => <Icon name="help-outline" color={ selectedIndex === 4 ? colorsAndFonts.colors.redBalehu : colorsAndFonts.colors.warmGrey } /> },
]

当然，我收到的是一个问号而不是图标。

提前感谢！

- Holly E

Answer 1

你可以这样使用：

    import AntIcon from "react-native-vector-icons/AntDesign";

...

    <AntIcon name="minuscircleo" color="green" size={50} />

顺便说一下，这适用于所有库。

- Muhammed Mirza

Answer 2

我有同样的问题，我调查了源代码并找到了这里的switch语句，它处理你在图标上提供的类型属性。 https://github.com/react-native-training/react-native-elements/blob/master/src/helpers/getIconType.js

  switch (type) {
    case 'zocial':
      return ZocialIcon;
    case 'octicon':
      return OcticonIcon;
    case 'material':
      return MaterialIcon;
    case 'material-community':
      return MaterialCommunityIcon;
    case 'ionicon':
      return Ionicon;
    case 'foundation':
      return FoundationIcon;
    case 'evilicon':
      return EvilIcon;
    case 'entypo':
      return EntypoIcon;
    case 'font-awesome':
      return FAIcon;
    case 'simple-line-icon':
      return SimpleLineIcon;
    case 'feather':
      return FeatherIcon;
    default:
      if (customIcons.hasOwnProperty(type)) {
        return customIcons[type];
      }
      return MaterialIcon;
  }

看起来 Ant Design 还没有被添加到这个辅助函数中。解决方案是直接导入它，就像其他答案中所示，或者提交一个 PR 来修复它（我现在正在提交一个 GitHub 问题）。

- dps

---

谢谢你深入探讨这个问题！我没时间去做，所以真的很希望有其他人能够做。也感激你提交了PR！ - Holly E