样式属性中的索引具有本机响应

Question

我正在构建一个带有本机反应的应用程序，我尝试将索引传递给样式属性，以获得不同的backgroundColor。

这是我的代码：

getData(data){
    const items = data.map((item, index) =>
        <View key={index} style={[styles.forecastItems, styles.forecastItems0]}>
            <Text>{item.day}</Text>
            <Image source={item.url}/>
            <Text>{item.temp}</Text>
        </View>
    );
    return (items)
}

在styles.forecastItem0我想要索引而不是0.我找不到解决方案。 谢谢你的帮助

Answer 1

你可以使用模板文字 ：

<View key={index} style={[styles.forecastItems, styles[`forecastItems${index}`]]}>

Answer 2

您可以使用这样的括号访问样式对象的属性

<View key={index} 
      style={[styles.forecastItems, styles.["forecastItems" + index] ]}
>

Answer 3

您应该将forecastItems创建为数组：

styles = {
    forcastItems = [1, 2, 3, 4]
}

现在，您可以以简单的方式索引数组：

<View key={index} style={[styles.forecastItems, styles.forecastItems[index]]}>

请注意，您应始终使用数组，而不是创建仅与数字后缀不同的变量名称（或对象中的键）。