如何为React Native FlatList创建按日期自动生成的条目分隔符？

有两种常用实现方案，你可以根据业务需求选择：

方案1：直接修改FlatList渲染逻辑（推荐，适配你现有代码改动最小） #

因为你的数据已经按日期排序，只需要在renderItem中通过索引对比当前条目和前一条目的日期即可，具体改动如下：

1. 调整Item组件，新增控制日期分隔符显示的参数：

function Item({ item, showDateHeader }) {
  return (
      <View>
        {/* 仅当日期变更时渲染分隔符和日期头 */}
        {showDateHeader && (
          <View style={{
            paddingVertical: 6,
            paddingHorizontal: 12,
            backgroundColor: '#f5f5f5',
            borderBottomWidth: 1,
            borderBottomColor: '#e0e0e0'
          }}>
            <Text style={{fontWeight: '500', color: '#666'}}>{item.eventID.eventDate}</Text>
          </View>
        )}
        <Text>{item.eventID.artistName}</Text>
        <Text>{item.ticketID}</Text>
      </View>
  );
}

2. 修改FlatList的renderItem配置，增加日期对比逻辑：

<FlatList
  style={{ flex: 1 }}
  data={this.state.tickets}
  renderItem={({ item, index, data }) => {
    // 第一条数据肯定要显示日期头，后续数据对比前一条的日期是否一致
    const isNewDate = index === 0 
      ? true 
      : item.eventID.eventDate !== data[index - 1].eventID.eventDate;
    return <Item item={item} showDateHeader={isNewDate} />
  }}
  keyExtractor={(item) => item.ticketID}
/>

方案2：使用SectionList实现（适合需要日期吸顶、分组操作的场景） #

如果后续需要做分组折叠、日期头部吸顶的交互，可以先把数据按日期分组，改用React Native原生的SectionList组件：

1. 请求数据时先做分组处理：

componentDidMount = () => {
  fetch("http://127.0.0.1:8000/api/fullticket/", {
    method: "GET",
  })
    .then((response) => response.json())
    .then((responseJson) => {
      // 按日期分组
      const groupedMap = responseJson.reduce((result, ticket) => {
        const date = ticket.eventID.eventDate;
        if (!result[date]) result[date] = [];
        result[date].push(ticket);
        return result;
      }, {});
      // 转换为SectionList要求的结构
      const sections = Object.keys(groupedMap).map(date => ({
        title: date,
        data: groupedMap[date]
      }));
      this.setState({ sections });
    })
    .catch((error) => {
      console.error(error);
    });
};

2. 把FlatList替换为SectionList：

render() {
  return (
    <View style={{flex:1}}>
      <SectionList
        sections={this.state.sections}
        keyExtractor={(item) => item.ticketID}
        renderItem={({ item }) => (
          <View>
            <Text>{item.eventID.artistName}</Text>
            <Text>{item.ticketID}</Text>
          </View>
        )}
        renderSectionHeader={({ section: { title } }) => (
          <View style={{
            paddingVertical: 6,
            paddingHorizontal: 12,
            backgroundColor: '#f5f5f5',
            borderBottomWidth: 1,
            borderBottomColor: '#e0e0e0'
          }}>
            <Text style={{fontWeight: '500', color: '#666'}}>{title}</Text>
          </View>
        )}
      />
    </View>
  );
}

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