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

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

以下是我的阵列的结构：

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

---

这是行不通的。

我认为没有办法从内部获取布尔值

在初始化数组时，您可以尝试设置正确的样式，但出于性能原因，我建议不要将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>
                     {obj.return}
                 </TouchableOpacity>
                 <Text>{obj.name}</Text>
            </View>
         )
     })}
</View>

<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>

{icons.map（（obj，index）=>{
返回(
{obj.name}
)
})}

希望这对您有所帮助

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

const图标=[
{
名称：“自动取款机”，
布尔：错，
返回：
}
]

之所以将它们存储在数组中，是因为我使用了不同的图标库，如FontAwesome5、IonIcons等。谢谢，但我在最初的帖子中指出，这显然不起作用。

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