Question

我正在使用不同类型的反应本机矢量图标-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。有可能吗？

Answer 1

您可以将名为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" />

输出：

完整的工作示例：

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

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

1 个答案: