Question

在React Native Elements中，有一个指向icon directory的链接。第一个库是AntDesign：Screenshot

在类型中，他们说“类型（默认为材料，选项为材料社区，生物，真棒字体，octicon，ionicon，粉底，evilicon，单线图标，羽毛或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 } /> },
]

当然，我只是得到一个?而不是图标。

提前谢谢！

Answer 1

我遇到了同样的问题，我研究了源代码，并在这里找到了switch语句，该语句处理您在图标上提供的prop类型。

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

Answer 2

您可以这样使用：

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

...

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

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

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

2 个答案: