¿Cómo alterno los colores en Flat List (React Native)?

¿Cómo alterno los colores en Flat List (React Native)?

Intentando alternar colores en React Natives Flatlist. Creo que necesito ID de fila o algo similar para hacerlo. Esto es lo que tengo hasta ahora:

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> 

¿Alguna idea?

Mostrar la mejor respuesta

El argumento de devolución de llamada renderItem tiene una propiedad index que le permite acceder al índice de fila para la fila actual:

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

¡Genial gracias! Pero, ¿cómo lo uso realmente: <FlatList style={{backgroundColor: ???} debería ser this.color ?

@johanjohansson no le da el color de fondo a FlatList, se lo dará a cada fila por separado dentro de la devolución de llamada renderItem. Actualicé el ejemplo de código para reflejar esto

Si está utilizando ListItem de react-native-element, use esto: <ListItem containerStyle = {{ backgroundColor: index % 2 == 0 ? "#f2f2f2" : "#FFFFFF" }}/>