我正在使用不同类型的反应本机矢量图标-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。有可能吗?
答案 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" />
输出:
完整的工作示例: