Как использовать значок AntDesign в React-Native-Elements

Question

В React Native Elements , есть ссылка на каталог icon .Первая библиотека - AntDesign: Снимок экрана

В типах они говорят "тип" (по умолчанию материал, варианты - материал-сообщество, zocial, шрифт-офигенный, octicon, ionicon, foundation, evilicon), простой значок линии, перо или энтипо).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} />

Кстати, это действительно для всех библиотек