代码之家 › 专栏 › 技术社区 › johanjohansson

如何在平面列表中交替颜色(React Native)

react-native-flatlist react-native javascript

7

johanjohansson · 技术社区 · 8 年前

尝试在中交替颜色 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>

有什么想法吗?

1 回复 | 直到 8 年前

1

20

jevakallio 8 年前

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