如何为React Native FlatList中的列表项设置差异化样式？

要实现目标样式，你需要把FlatList的index传递给BookBox组件，然后根据index为不同位置的列表项设置差异化样式，具体步骤如下：

1. 修改Home组件，传递index给BookBox #

在renderBooks函数中，接收FlatList提供的index参数并传递给BookBox：

// HomeScreen.tsx
const renderBooks = ({item, index}: {item: Book; index: number}) => <BookBox book={item} index={index} />;

同时给FlatList添加contentContainerStyle，设置整体内边距，让列表项和屏幕边缘保持间距：

<FlatList
  data={books}
  keyExtractor={item => item.id?.toString()}
  renderItem={renderBooks}
  numColumns={2}
  contentContainerStyle={{paddingHorizontal: 16, paddingVertical: 8}}
/>

2. 更新BookBox组件的Props和样式逻辑 #

首先扩展BookBox的Props接口，添加index属性：

// BookBox.tsx
interface Props {
  book: Book;
  index: number;
}

然后在组件中，根据index判断当前项是每行的左项还是右项（index % 2 === 0为左项，index % 2 === 1为右项），动态拼接样式：

export default function BookBox({book, index}: Props) {
  // 原有的变量和导航逻辑保持不变

  return (
    <View style={[styles.container, index % 2 === 0 ? styles.leftItem : styles.rightItem]}>
      {/* 原有的图片、文本内容保持不变 */}
    </View>
  );
}

最后在StyleSheet中添加差异化样式：

const styles = StyleSheet.create({
  container: {
    flex: 1, // 让左右两项平分每行宽度
  },
  leftItem: {
    marginRight: 8, // 左项右侧留间距
    marginBottom: 16, // 上下项之间的间距
  },
  rightItem: {
    marginLeft: 8, // 右项左侧留间距
    marginBottom: 16,
  },
  // 原有的image、wrap、title等样式保持不变
});

补充说明 #

如果需要更复杂的差异化样式（比如隔行样式变化），可以通过Math.floor(index / 2)获取当前行号，再根据行号设置对应样式，比如偶数行和奇数行的项使用不同背景色或间距。

内容的提问来源于stack exchange，提问作者greta calamari