reactjs - 动态传递 prop 在 React Native 中没有任何值(value)

Question

我对原生 react 完全陌生。目前正在探索 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} />