¿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
Publicado : 4 April, 2018 @ 07:57
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>
Publicado : 4 April, 2018 @ 08:01
¡Genial gracias! Pero, ¿cómo lo uso realmente: <FlatList style={{backgroundColor: ???} debería ser this.color ?
Publicado : 4 April, 2018 @ 09:17
@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
Publicado : 4 April, 2018 @ 14:04
Si está utilizando ListItem de react-native-element, use esto: <ListItem containerStyle = {{ backgroundColor: index % 2 == 0 ? "#f2f2f2" : "#FFFFFF" }}/>
Publicado : 27 August, 2019 @ 10:38
