下面是一个按日期分组的FlatList项目的代码示例,其中使用了moment.js库来处理日期:
import React from 'react';
import { View, Text, FlatList } from 'react-native';
import moment from 'moment';
const data = [
{ id: 1, title: 'Item 1', date: '2022-01-01' },
{ id: 2, title: 'Item 2', date: '2022-01-02' },
{ id: 3, title: 'Item 3', date: '2022-01-01' },
{ id: 4, title: 'Item 4', date: '2022-01-03' },
{ id: 5, title: 'Item 5', date: '2022-01-02' },
];
const GroupedFlatList = () => {
// 根据日期分组数据
const groupedData = data.reduce((acc, item) => {
const date = moment(item.date).format('YYYY-MM-DD');
if (!acc[date]) {
acc[date] = [];
}
acc[date].push(item);
return acc;
}, {});
// 转换分组数据为FlatList所需的数组格式
const sections = Object.keys(groupedData).map((date) => ({
title: date,
data: groupedData[date],
}));
// 渲染每个分组的标题和项目
const renderItem = ({ item }) => (
{item.title}
);
// 渲染分组列表
const renderSectionHeader = ({ section }) => (
{section.title}
);
return (
item.id.toString()}
/>
);
};
export default GroupedFlatList;
在这个示例中,数据数组data
包含了每个项目的id
、title
和date
属性。我们使用reduce
方法将数据按日期分组,并将结果存储在groupedData
对象中。然后,我们将groupedData
转换为适用于FlatList的sections
数组格式,其中每个分组都包含一个title
和一个data
数组。在renderItem
函数中,我们渲染每个项目的标题。在renderSectionHeader
函数中,我们渲染每个分组的标题。最后,我们将sections
作为FlatList的sections
属性传递,并使用keyExtractor
来指定每个项目的唯一键。
下一篇:按日期分组滚动求和结果不符合预期