Как я могу чередовать цвета в плоский список (React Native)

Question

Пытаясь чередовать цвета в React NativesFlatlist, Я считаю, что мне нужен 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> 

Answer 2

https://www.youtube.com/watch?v=Ca9t95K4Lko&list=PLWBrqglnjNl2yaCcp0HEAWp6zBIfingZ-&index=17

Я надеюсь, что этот учебник YouTube поможет вам получить то, что вам нужно.