Question

我完全不熟悉本地人。目前正在探索FontAwesome 5 pro图标的react native矢量图标。

https://github.com/oblador/react-native-vector-icons

FontAwesome 5有3种类型的图标集，例如常规，纯色和浅色。

import Icon from 'react-native-vector-icons/FontAwesome5';

const myIcon1 = <Icon name="comments" size={30} color="#900" />; // Defaults to regular
const myIcon2 = <Icon name="comments" size={30} color="#900" solid />;
const myIcon3 = <Icon name="comments" size={30} color="#900" light />; // Only in FA5 Pro

有什么方法可以动态传递图标类型（浅色，纯色）？

到目前为止，我已经尝试了以下方法：

let iconType = focused ? 'solid' : 'light';

return <Icon name="comments" size={30} color="#900" {...iconType} />;

Answer 1

solid道具采用一个boolean值（如果您不通过，则默认为false），这意味着

<Icon name="comments" size={30} color="#900" solid />
<Icon name="comments" size={30} color="#900" />

的缩写，

<Icon name="comments" size={30} color="#900" solid={true} />
<Icon name="comments" size={30} color="#900" solid={false} />

对于您的情况，您可以尝试

<Icon name="comments" size={30} color="#900" solid={focused} light={!focused} />

Answer 2

我建议您创建一个可重用的自定义组件来解决您的问题，诸如此类

const GetIcon = props => {
  return (
    <Icon name={props.name} size={30} color="#900" solid={props.focused} light={!props.focused} />
  );
};

然后在您的类中调用这样的组件

<GetIcon name="comments" focused={true}/>

有关可重用组件的更多信息，请阅读this

Answer 3

{...iconType}是对象扩展语法，这意味着您扩展了对象并将其作为key=value传递给组件，并且没有意义，因为iconType是字符串。 / p>

据我所知，无法像您期望的那样设置JSX属性。相反，您可以在返回组件之前检查条件：

return focused ? 
        <Icon name="comments" size={30} color="#900" solid /> : 
        <Icon name="comments" size={30} color="#900" light/>;

动态传递道具，没有任何反应本机值

3 个答案: