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

Question

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

在类型中，他们说“类型（默认为材料，选项是材料-社区，生物，真棒字体，辛迪克，离子子，粉底，邪恶图标，简单线条图标，羽毛或整平”）。这些不包括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 } /> },
]

当然，我只是获得?支持而不是图标。

提前致谢！

Answer 1

你可以这样使用：

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

...

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

顺便说一句，这对所有库都有效

Answer 2

我遇到了同样的问题，我研究了源代码并找到了 switch 语句，它处理您在图标上提供的 type 属性。

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 问题）。