Реагировать родные векторные иконки - динамический тип - PullRequest
Новая
       11

Реагировать родные векторные иконки - динамический тип

2 голосов
/ 06 июля 2019

Я использую различные типы реагирующих нативных векторных иконок - Material и FontAwesome в зависимости от доступности конкретной иконки.Я хотел создать общий компонент, который обернул бы использование значков в приложении.Пока у меня есть: 

import React from 'react';
import Icon from "react-native-vector-icons/FontAwesome";
import {theme} from "../../../styles/style";

/**
 * Common reusable icon component
 * @param props
 * @returns {*}
 */
const icon = (props) => {
    return (
        <Icon
            size={theme.SIZE_ICON}
            color={theme.BACKGROUND_ICON_COLOR}
            {...props}
            style={props.style}/>
    );
};

export default icon;

, который работает только для FontAwesome, как я могу сделать его динамическим на основе, например, параметра prop, чтобы я мог использовать значки материалов, когда это необходимо?Примечание: я не хотел бы создавать отдельные компоненты для каждого типа, например, IconMaterial, IconFontAwesome и т. Д. Я хочу, чтобы имя компонента было Icon, независимо от типа.Это возможно?

1 Ответ

2 голосов
/ 06 июля 2019

Вы можете передать реквизит, называемый iconFamily, вашему компоненту иконки:

Внутри вашего компонента Icon вы импортируете все шрифты, которые хотите использовать, например ::

import IconFA from "react-native-vector-icons/FontAwesome";
import IconMA from "react-native-vector-icons/Material";

Тогда внутри функции визуализации Icon: 

  const Icon = (props) => {

  renderIcon = () => {
    if (props.iconFamily == "FA") {
      return (
        <IconFA
        size={23}
        {...props}
        style={props.style}/>
      );
   } 
   if (props.iconFamily == "MA") {
      return (
        <IconMA
        size={23}
        {...props}
        style={props.style}/>
      );
   }
  }
  return (
      renderIcon()
  )
}

Когда вы используете свой пользовательский компонент значков, вам просто нужно указать свойство iconFamily: 

 <Icon iconFamily="FA" name="home" color="green" /> 
 <Icon iconFamily="MA" name="code" color="red" />

Выход:

output

Полный рабочий пример:

https://snack.expo.io/@tim1717/humiliated-hummus

...