如何在平面列表中替换颜色（React Native） [英] How do I alternate colors in Flat List (React Native)

问题描述

尝试在中替换颜色React Natives Flatlist 。我相信我需要rowID或类似的东西。这就是我到目前为止：

Trying to alternate colors in React Natives Flatlist. I believe I need rowID or something similar to do it. This is what I've got so far:

let colors = ['#123456', '#654321', '#fdecba', '#abcdef'];


<View >
    <FlatList style={{backgroundColor: colors[this.index % colors.length]}}

      data={this.state.dataSource}
      renderItem={({item}) => <Text style={styles.listStyle}>{item.title}, {item.releaseYear}</Text>}
      keyExtractor={(item, index) => index}
    />
  </View> 

任何想法？

推荐答案

renderItem 回调参数有一个属性 index ，允许您访问行索引当前行：

The renderItem callback argument has a property index that allows you to access the row index for the current row:

<View >
  <FlatList
    data={this.state.dataSource}
    keyExtractor={(item, index) => index}
    renderItem={({item, index}) => (
      <View style={{ backgroundColor: colors[index % colors.length] }}>
        <Text style={styles.listStyle}>{item.title}, {item.releaseYear}</Text>
      </View>
    )}
  />
</View> 

这篇关于如何在平面列表中替换颜色（React Native）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！