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

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

react-native-flatlist react-native javascript

johanjohansson · 技术社区 · 7 年前

尝试在中交替颜色 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 回复 | 直到 7 年前

jevakallio 7 年前

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

推荐文章

theDC · 平面列表单选单元格

6 年前

Md Nahid Hasan · 如何在react原生平面列表中精确定位项目并隐藏某些内容?

7 年前

j_d · 如何使用React Native FlatList设置重新排序动画?

7 年前

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

7 年前

arnoldbird · 我的平面列表似乎不需要密钥抽取器——为什么?

7 年前

KaplanAlex · React Native FlatList-使用动态大小呈现列表项

7 年前

Sandro_V · 对FlatList的React本机引用不起作用

7 年前

Saeid · 在react native中不调用平面列表中的函数

7 年前

Corrado · ReactNative平面列表-RenderItem不工作

7 年前

Adnan Ali · ReactNative android应用程序中的慢速动画

7 年前