使用react-native-calendars渲染Agenda事件失败，如何解决？

核心问题：Agenda组件的items格式不符合要求 #

react-native-calendars的Agenda组件对items属性有严格格式要求：

• 必须是对象类型，键为YYYY-MM-DD格式的标准日期字符串
• 每个键对应的值是该日期下的事件数组

步骤1：检查并修正events.json格式 #

正确的JSON结构示例：

{
  "2024-05-20": [
    {
      "id": "1",
      "title": "数学单元测试",
      "startTime": "09:00",
      "endTime": "11:00"
    }
  ],
  "2024-05-21": [
    {
      "id": "2",
      "title": "英语听力训练",
      "startTime": "14:30",
      "endTime": "16:00"
    }
  ]
}

如果你的JSON是纯事件数组格式（比如直接存储所有事件的数组），需要在代码中转换为Agenda要求的结构：

import { StyleSheet, SafeAreaView, View, Text } from "react-native";
import React from "react";
import { Agenda } from "react-native-calendars";

import Header from "../components/Header";
import events from "../data/calendar/events.json";

const StudentAgenda = () => {
  // 将数组格式事件转换为Agenda要求的键值对结构
  const formattedEvents = events.reduce((acc, event) => {
    if (!acc[event.date]) {
      acc[event.date] = [];
    }
    acc[event.date].push(event);
    return acc;
  }, {});

  return (
    <SafeAreaView style={styles.container}>
      <Header isProfile={false} />
      {/* 给Agenda设置flex:1占满剩余空间，同时自定义事件渲染 */}
      <Agenda
        items={formattedEvents}
        style={{ flex: 1 }}
        renderItem={(item) => (
          <View style={styles.eventItem}>
            <Text style={styles.eventTitle}>{item.title}</Text>
            <Text style={styles.eventTime}>{item.startTime} - {item.endTime}</Text>
          </View>
        )}
      />
    </SafeAreaView>
  );
};

export default StudentAgenda;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#E8EAED",
  },
  eventItem: {
    backgroundColor: "#fff",
    padding: 12,
    marginVertical: 6,
    marginHorizontal: 10,
    borderRadius: 8,
  },
  eventTitle: {
    fontSize: 16,
    fontWeight: "500",
  },
  eventTime: {
    fontSize: 14,
    color: "#666",
    marginTop: 4,
  },
});

步骤2：确保Agenda占满可用空间 #

给Agenda组件添加style={{ flex: 1 }}，让它填充SafeAreaView的剩余空间，避免因高度不足导致的异常加载状态。

步骤3：自定义事件渲染（必要操作） #

默认情况下Agenda不会自动渲染事件内容，必须通过renderItem属性自定义每个事件的UI，才能看到事件展示效果。

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