React Native中无限日历滚动实现方案咨询

核心思路 #

不用预生成大量Date对象，而是基于基准日期（如当前日期），通过偏移量按需计算目标日期，结合React Native的FlatList实现按需渲染，既支持无限滚动，也能轻松控制范围（比如5年）。

具体实现步骤 #

1. 利用FlatList搭建滚动基础结构 #

FlatList是React Native专为长列表设计的组件，支持按需渲染（仅渲染可见区域的项），完美适配无限滚动场景：

• 设置horizontal={true}实现横向滚动（匹配示例效果）；
• 通过initialNumToRender控制初始渲染的日期数量（比如7天，对应可见区域的项数）；
• 用keyExtractor给每个日期项设置唯一标识（建议用格式化后的日期字符串，如YYYY-MM-DD）。

2. 日期计算逻辑（核心） #

编写工具函数，根据基准日期和偏移天数计算目标日期，彻底避免预存大量Date对象：

// 根据基准日期和偏移天数计算目标日期
const calculateDate = (baseDate, offsetDays) => {
  const targetDate = new Date(baseDate);
  targetDate.setDate(targetDate.getDate() + offsetDays);
  return new Date(targetDate); // 返回新对象，避免修改原基准日期
};

// 格式化日期为YYYY-MM-DD，用于作为唯一key和任务关联
const formatDate = (date) => date.toISOString().split('T')[0];

比如：

• 偏移量0对应基准日期（今天）；
• 偏移量+1对应明天，-1对应昨天，以此类推。

3. 实现无限滚动加载 #

通过监听滚动事件，动态扩展需要渲染的日期偏移量范围：

• 往后滚动加载未来日期：用onEndReached和onEndReachedThreshold监听滚动到底部，添加后续日期的偏移量；
• 往前滚动加载过往日期：用onScroll结合contentOffset判断是否滚动到顶部附近，添加过往日期的偏移量。

示例逻辑：

const [dateOffsets, setDateOffsets] = useState([-3, -2, -1, 0, 1, 2, 3]); // 初始渲染前后3天

// 加载更多过往日期
const loadPreviousDates = () => {
  const firstOffset = dateOffsets[0];
  const newOffsets = Array.from({length: 3}, (_, i) => firstOffset - (i + 1)).concat(dateOffsets);
  setDateOffsets(newOffsets);
};

// 加载更多未来日期
const loadNextDates = () => {
  const lastOffset = dateOffsets[dateOffsets.length - 1];
  const newOffsets = dateOffsets.concat(Array.from({length: 3}, (_, i) => lastOffset + (i + 1)));
  setDateOffsets(newOffsets);
};

// 监听滚动，判断是否需要加载过往日期
const handleScroll = (event) => {
  const { contentOffset, layoutMeasurement } = event.nativeEvent;
  if (contentOffset.x < layoutMeasurement.width) { // 距离顶部不足一个item宽度时加载
    loadPreviousDates();
  }
};

4. 关联任务数据 #

渲染日期项时，用格式化后的日期字符串（如2024-05-20）作为key，从任务数据源中匹配对应日期的任务：

const renderItem = ({ item }) => {
  // 用useMemo缓存过滤后的每日任务，提升性能
  const dailyTasks = useMemo(() => {
    return taskData.filter(task => task.date === item.dateStr);
  }, [taskData, item.dateStr]);

  return (
    <View style={styles.dateItem}>
      <Text>{item.date.getDate()}</Text>
      <Text>{item.date.toLocaleString('zh-CN', { month: 'short' })}</Text>
      {dailyTasks.map(task => (
        <Text key={task.id} style={styles.taskText}>{task.title}</Text>
      ))}
    </View>
  );
};

5. 控制滚动范围（如限制5年） #

如果不需要真无限，而是限制前后5年，可先计算边界日期，在加载时判断是否超出范围：

const today = new Date();
const fiveYearsAgo = new Date(today);
fiveYearsAgo.setFullYear(fiveYearsAgo.getFullYear() - 5);
const fiveYearsLater = new Date(today);
fiveYearsLater.setFullYear(fiveYearsLater.getFullYear() + 5);

// 加载过往日期时判断是否超出5年前
const loadPreviousDates = () => {
  const firstOffset = dateOffsets[0];
  const checkDate = calculateDate(today, firstOffset - 1);
  if (checkDate < fiveYearsAgo) return; // 超出范围则停止加载
  const newOffsets = Array.from({length: 3}, (_, i) => firstOffset - (i + 1)).concat(dateOffsets);
  setDateOffsets(newOffsets);
};

// 加载未来日期时同理判断是否超出5年后

完整示例代码 #

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

// 日期计算工具函数
const calculateDate = (baseDate, offsetDays) => {
  const targetDate = new Date(baseDate);
  targetDate.setDate(targetDate.getDate() + offsetDays);
  return targetDate;
};

// 格式化日期为YYYY-MM-DD
const formatDate = (date) => {
  return date.toISOString().split('T')[0];
};

const InfiniteCalendar = () => {
  const today = new Date();
  // 初始渲染前后各3天，共7天
  const [dateOffsets, setDateOffsets] = useState([-3, -2, -1, 0, 1, 2, 3]);

  // 计算5年范围边界
  const fiveYearsAgo = useMemo(() => {
    const date = new Date(today);
    date.setFullYear(date.getFullYear() - 5);
    return date;
  }, [today]);
  const fiveYearsLater = useMemo(() => {
    const date = new Date(today);
    date.setFullYear(date.getFullYear() + 5);
    return date;
  }, [today]);

  // 生成当前需要渲染的日期列表
  const renderDates = useMemo(() => {
    return dateOffsets.map(offset => ({
      offset,
      date: calculateDate(today, offset),
      dateStr: formatDate(calculateDate(today, offset))
    }));
  }, [dateOffsets, today]);

  // 加载更多前面的日期（往前滚）
  const loadPreviousDates = () => {
    const firstOffset = dateOffsets[0];
    const checkDate = calculateDate(today, firstOffset - 1);
    if (checkDate < fiveYearsAgo) return;
    // 添加前3天的偏移量
    const newOffsets = Array.from({length: 3}, (_, i) => firstOffset - (i + 1)).concat(dateOffsets);
    setDateOffsets(newOffsets);
  };

  // 加载更多后面的日期（往后滚）
  const loadNextDates = () => {
    const lastOffset = dateOffsets[dateOffsets.length - 1];
    const checkDate = calculateDate(today, lastOffset + 1);
    if (checkDate > fiveYearsLater) return;
    // 添加后3天的偏移量
    const newOffsets = dateOffsets.concat(Array.from({length: 3}, (_, i) => lastOffset + (i + 1)));
    setDateOffsets(newOffsets);
  };

  // 监听滚动，判断是否需要加载前面的日期
  const handleScroll = (event) => {
    const { contentOffset, layoutMeasurement } = event.nativeEvent;
    // 当滚动到距离顶部不足1个item宽度时，加载前面的日期
    if (contentOffset.x < layoutMeasurement.width) {
      loadPreviousDates();
    }
  };

  const renderItem = ({ item }) => {
    // 模拟任务数据，实际项目中替换为你的数据源
    const mockTasks = [
      { id: 1, date: item.dateStr, title: "完成周报" },
      { id: 2, date: item.dateStr, title: "健身" }
    ];
    const dailyTasks = useMemo(() => mockTasks.filter(t => t.date === item.dateStr), [mockTasks, item.dateStr]);

    return (
      <View style={styles.dateItem}>
        <Text style={styles.dateText}>{item.date.getDate()}</Text>
        <Text style={styles.monthText}>{item.date.toLocaleString('zh-CN', { month: 'short' })}</Text>
        {dailyTasks.map(task => (
          <Text key={task.id} style={styles.taskText}>{task.title}</Text>
        ))}
      </View>
    );
  };

  return (
    <FlatList
      horizontal
      pagingEnabled={false}
      showsHorizontalScrollIndicator={false}
      data={renderDates}
      renderItem={renderItem}
      keyExtractor={(item) => item.dateStr}
      onEndReached={loadNextDates}
      onEndReachedThreshold={0.5}
      onScroll={handleScroll}
      initialNumToRender={7}
    />
  );
};

const styles = StyleSheet.create({
  dateItem: {
    width: 80,
    height: 120,
    justifyContent: 'center',
    alignItems: 'center',
    borderWidth: 1,
    borderColor: '#eee',
    marginHorizontal: 5,
    borderRadius: 8,
    backgroundColor: '#fff'
  },
  dateText: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333'
  },
  monthText: {
    fontSize: 14,
    color: '#666',
    marginVertical: 4
  },
  taskText: {
    fontSize: 12,
    color: '#333',
    marginTop: 6,
    textAlign: 'center'
  }
});

export default InfiniteCalendar;

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