React Native+React-Native-Calendars：按日期展示日程的实现求助

核心实现逻辑 #

1. 维护选中日期的状态，初始值设为当日的YYYY-MM-DD格式字符串
2. 配置日历组件的onDayPress事件，点击日期时更新选中状态
3. 根据选中日期过滤日程数据，动态渲染对应列表

完整代码示例 #

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

const StudentCalendar = () => {
  // 初始化选中日期为当日，转换为YYYY-MM-DD格式
  const [selectedDate, setSelectedDate] = useState(() => {
    const today = new Date();
    return today.toISOString().split('T')[0];
  });

  // 模拟日程数据，确保date字段为YYYY-MM-DD格式
  const events = [
    { id: '1', title: '数学单元测验', date: '2024-05-20' },
    { id: '2', title: '英语公开课', date: '2024-05-20' },
    { id: '3', title: '编程社团招新', date: '2024-05-21' },
    { id: '4', title: '期中家长会', date: '2024-05-22' },
  ];

  // 标记有日程的日期，方便日历上显示提示点
  const markedDates = events.reduce((acc, event) => {
    acc[event.date] = { marked: true, dotColor: '#2196F3' };
    return acc;
  }, {});

  // 过滤选中日期对应的日程
  const filteredEvents = events.filter(event => event.date === selectedDate);

  return (
    <View style={styles.container}>
      {/* 日历组件 */}
      <Calendar
        onDayPress={(day) => setSelectedDate(day.dateString)}
        markedDates={markedDates}
        selected={selectedDate}
        theme={{
          selectedDayBackgroundColor: '#2196F3',
          todayTextColor: '#2196F3',
          arrowColor: '#2196F3',
        }}
      />

      {/* 日程标题 */}
      <Text style={styles.dateTitle}>{selectedDate} 日程列表</Text>

      {/* 日程列表渲染 */}
      <FlatList
        data={filteredEvents}
        keyExtractor={item => item.id}
        renderItem={({ item }) => (
          <View style={styles.eventItem}>
            <Text style={styles.eventTitle}>{item.title}</Text>
          </View>
        )}
        ListEmptyComponent={() => (
          <Text style={styles.emptyText}>当日暂无安排</Text>
        )}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 20,
  },
  dateTitle: {
    fontSize: 18,
    fontWeight: '600',
    padding: 15,
    textAlign: 'center',
  },
  eventItem: {
    padding: 15,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
  eventTitle: {
    fontSize: 16,
  },
  emptyText: {
    textAlign: 'center',
    padding: 20,
    color: '#999',
  },
});

export default StudentCalendar;

映射失败常见排查点 #

• 日期格式不匹配：确认日程数据的date字段和日历返回的day.dateString完全一致（均为YYYY-MM-DD）
• 过滤逻辑错误：检查filter条件是否准确，避免因格式或大小写差异导致过滤结果为空
• 状态更新问题：点击日期后打印selectedDate，确认状态是否正确更新
• 列表渲染问题：确保FlatList的data属性传入的是过滤后的数组，keyExtractor使用唯一ID

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