React Native:如何根据同一对象中的其余属性有条件地设置元素样式

Question

我的React Native应用程序中有一个模态中的图标列表。由于我需要根据颜色显示这些图标的可用性，所以我将它们放入了一个具有布尔属性的数组中。但我想知道的是，如何根据同一对象的布尔属性向图标元素添加条件样式。

这是我的数组结构：

const icons = [
{
name: 'ATM',
bool: false,
return: 
<FontAwesome 
name='euro'
size={25}
color={bool ? 'green' : 'grey'}
/>
}
]

然后我在我的模式中显示图标，如下所示：

<View style={{flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-evenly'}}>
{icons.map((obj, index) => {
return (
<View style={{justifyContent: 'center', alignItems: 'center', padding: wp('2.0%')}}>
<TouchableOpacity>
{obj.return}
</TouchableOpacity>
<Text>{obj.name}</Text>
</View>
)
})}
</View>

我也试过使用

this.bool ? 'green' : 'grey'

这不起作用。

Answer 1

我认为没有办法从内部访问bool的值。

您可以尝试在初始化数组时设置正确的样式，但出于性能原因，我建议不要将react元素直接存储在大型数组中，而是在模式中显示图标，如下所示：

<View style={{flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-evenly'}}>
{icons.map((obj, index) => {
return (
<View style={{justifyContent: 'center', alignItems: 'center', padding: wp('2.0%')}}>
<TouchableOpacity>
<FontAwesome 
name='euro'
size={25}
color={obj.bool ? 'green' : 'grey'}
/>
</TouchableOpacity>
<Text>{obj.name}</Text>
</View>
)
})}
</View>

Answer 2

希望这能帮助你

const icons = [
{
name: 'ATM',
bool: false,
return: 
<FontAwesome 
name='euro'
size={25}
color={this.bool == true ? 'green' : 'grey'}
/>
}
]