如何为两列布局FlatList设置交替项背景色 避免同列相邻项同色

核心逻辑 #

固定2列布局下，先通过列表项索引计算对应行号、列号，再基于行列值判断背景色，可完全满足要求：

• 同一行两个列表项颜色不同
• 同列相邻行列表项颜色不同
• 相邻项视觉区分清晰，匹配黑白参考效果
  基础计算规则：
• 行号：row = Math.floor(index / 2)
• 列号：col = index % 2
• 两色模式（匹配描述的黑白示例）：通过(row + col) % 2的值切换黑白两色，最终为标准棋盘格效果：
  • 第1项（行0列0）：白色
  • 第2项（行0列1）：黑色
  • 第3项（行1列0）：黑色（符合同列不重复白色的要求）
  • 第4项（行1列1）：白色
  • 后续项按规律循环即可

代码示例 #

import React from 'react';
import { FlatList, View, Text, StyleSheet } from 'react-native';

// 示例数据源
const DATA = Array.from({ length: 20 }, (_, i) => ({
  id: i,
  title: `列表项 ${i + 1}`
}));

export default function TwoColFlatList() {
  const renderItem = ({ item, index }) => {
    const row = Math.floor(index / 2);
    const col = index % 2;
    // 两色棋盘格核心逻辑
    const isLightBg = (row + col) % 2 === 0;
    const bgColor = isLightBg ? '#ffffff' : '#1a1a1a';
    const textColor = isLightBg ? '#1a1a1a' : '#ffffff';

    return (
      <View style={[styles.item, { backgroundColor: bgColor }]}>
        <Text style={[styles.itemText, { color: textColor }]}>
          {item.title}
        </Text>
      </View>
    );
  };

  return (
    <FlatList
      data={DATA}
      renderItem={renderItem}
      keyExtractor={item => item.id.toString()}
      numColumns={2}
      columnWrapperStyle={styles.rowWrapper}
      contentContainerStyle={styles.listContainer}
    />
  );
}

const styles = StyleSheet.create({
  listContainer: {
    padding: 8,
    gap: 8
  },
  rowWrapper: {
    gap: 8
  },
  item: {
    flex: 1,
    paddingVertical: 32,
    borderRadius: 8,
    alignItems: 'center',
    justifyContent: 'center'
  },
  itemText: {
    fontSize: 16,
    fontWeight: '500'
  }
});

扩展：对角完全差异化配色 #

如果需要斜向对角的列表项也使用完全不同的配色，可以扩展为4色循环方案，替换renderItem中的颜色判断逻辑即可：

// 4个差异化配色，可根据需求调整色值
const colorMap = ['#ffffff', '#f0f0f0', '#2a2a2a', '#121212'];
const colorIndex = (row * 2 + col) % 4;
const bgColor = colorMap[colorIndex];
// 文字颜色根据背景明暗自动切换
const textColor = colorIndex < 2 ? '#1a1a1a' : '#ffffff';

注意事项 #

• 不要给列表项设置固定宽度，保持flex:1即可自动适配列宽，避免不同屏幕下布局错乱
• 行内间距优先通过columnWrapperStyle的gap（RN 0.71+支持）或margin实现，不要挤压列宽
• 如果列表存在header/footer等额外元素，注意索引计算是否需要偏移，避免配色规律错乱

内容的提问来源于stack exchange，提问作者deepanshi gupta