反应本地矢量图标-动态类型

时间:2019-07-06 13:10:54

标签: react-native react-native-vector-icons

我正在使用不同类型的反应本机矢量图标-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 个答案:

答案 0 :(得分:2)

您可以将名为iconFamily的道具传递到图标组件:

在图标组件内部,您正在导入要使用的所有字体,例如:

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