Javascript 为交替背景创建循环或播放状态

我有一个列表，我想更改列表中项目的背景色。 基本上，为了增加对比度和更好的渲染效果，我想从两个产品中的一个产品更改背景

为此，我想用这个：

背景颜色：item.id%2==0？'#fde3a7'：'#FFF'

它可以工作，但问题是我的ID不一定是有序的，因此它给了我：

但是，我不知道如何将其应用于二分之一的产品。 我的想法是将一个变量作为参数传递，该变量随每个循环或使用一个状态而递增，例如，在每个位置，背景都会发生变化（偶数位置：白色背景，奇数位置背景橙色）

另一方面，我有这个想法，但我有点迷失在如何实现它

我不知道我是否表达得很好，你是否理解我的问题。无论如何，谢谢你的帮助

列表的全部代码：

const Item = ({ item, onPress, style }) => (
  <ListItem
    style={{width:'100%'}}
    containerStyle= {{backgroundColor: item.id % 2 === 0 ? '#fde3a7' : '#FFF'}}
    bottomDivider
    onPress={() => this.props.navigation.navigate('ProductDetails', {productId:parseInt(item.id)})}>
    <ListItem.Content style={{flexDirection: 'row', justifyContent: 'space-between'}}>
      <Image //source={{uri: URL + item.photo.["_1_"].url}} style={{ width: 25, height: 25}}
      />
      <ListItem.Title style={{width: '65%', fontSize: 16}}>{ ( item.name.length > 20 ) ? item.name.substring(0, 20) + ' ...'  :  item.name}</ListItem.Title>
      <ListItem.Subtitle style={{ color: '#F78400', position: "absolute", bottom: 0, right: 0 }}>{item.cost}{i18n.t("products.money")}</ListItem.Subtitle>
    </ListItem.Content>
  </ListItem>
);

const Item=（{Item，onPress，style}）=>(
this.props.navigation.navigate（'ProductDetails'，{productId:parseInt（item.id）}>
{（item.name.length>20）？item.name.substring（0,20）+'…'：item.name}
{item.cost}{i18n.t（“products.money”）}
);

您可以使用从renderItem方法（FlatList）获得的索引参数，而不是item.id

renderItem({ item, index, separators });

---

按索引扩展renderItem方法，并通过道具将索引传递给ListItem

您可以使用从renderItem方法（FlatList）而不是item.id获得的索引参数

renderItem({ item, index, separators });

---

通过索引扩展您的renderItem方法，并通过道具将索引传递到ListItem

我希望您有一个项目数组。您应该检查项目

索引

是否为

我希望您拥有项目数组。您应该选中项目

索引