React Native 中如何对 Flatlist 渲染的数据实现最近7天筛选

实现步骤 #

1. 最近7天数据筛选逻辑 #

先对原始数据源做过滤，代码示例如下：

// 计算7天前的时间戳
const getSevenDaysAgo = () => {
  const now = new Date()
  return now.setDate(now.getDate() - 7)
}

// 过滤得到最近7天的数据，按你实际的时间字段名调整createTime即可
const filteredList = rawList.filter(item => {
  const itemTime = new Date(item.createTime).getTime()
  return itemTime >= getSevenDaysAgo()
})

2. 绑定到FlatList组件 #

把过滤后的数据直接传给FlatList的data属性即可，原有渲染逻辑不需要改动：

<FlatList
  data={filteredList}
  renderItem={({item}) => <你的列表项组件 item={item} />}
  keyExtractor={item => item.id.toString()}
  // 其他原有FlatList配置保持不变
/>

可选扩展：支持切换筛选范围 #

如果需要支持「全部/最近7天」切换，加一个状态控制即可：

const [filterType, setFilterType] = useState('all')

// 用useMemo缓存过滤结果，避免不必要的重计算
const showList = useMemo(() => {
  if (filterType === '7days') {
    const sevenDaysAgo = new Date().setDate(new Date().getDate() -7)
    return rawList.filter(item => new Date(item.createTime).getTime() >= sevenDaysAgo)
  }
  return rawList
}, [rawList, filterType])

将showList传给FlatList的data属性，切换筛选类型时修改filterType的值，列表会自动刷新。

内容的提问来源于stack exchange，提问作者Khusni Ja'far