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

Question

我正在使用react native构建应用程序，并尝试将索引传递给样式属性，以使其具有不同的backgroundColor。

这是我的代码：

<input id="myinput" type="checkbox" />
<label for="myinput" class="indented-checkbox-text">I have reviewed the business information and documentation above, and assert that the information and documentation shown is current and accurate.</label>

style.forecastItem0中的

我希望索引而不是0。 我找不到解决方案。 谢谢你的帮助

Answer 1

您可以使用Template literals：

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

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