我如何在平面列表中交替颜色(反应本机)

Question

试图在React Natives Flatlist中交替使用颜色。我相信我需要ROWID或类似的事情。这就是我到目前为止所拥有的：

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> 

有什么想法？

Answer 1

renderItem回调参数具有属性index，可让您访问当前行的行索引：

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