使用react-native-calendars的ExpandableCalendar报TypeError: xdate[0]未定义，求解答

可能的原因及解决方向 #

1. 移除不兼容的属性 #

ExpandableCalendar与CalendarList的布局逻辑不同，默认不支持horizontal和pagingEnabled属性——这两个属性是为水平滚动的日历列表设计的，而ExpandableCalendar是可展开的垂直日历，强行传入会干扰内部日期处理逻辑。

尝试移除这两个属性后测试：

<ExpandableCalendar
  style={styles.calendar}
  theme={theme}
  closeOnDayPress
  firstDay={1}
  markingType="custom"
  markedDates={dates}
  displayLoadingIndicator={loading}
  dayComponent={({ date, marking }) => (
    <Day date={date} marking={marking} scrollTo={scrollTo} />
  )}
/>

2. 检查markedDates格式 #

确保markedDates完全符合custom标记类型的要求：

• 日期键必须是YYYY-MM-DD格式（不能用斜杠分隔）
• 每个日期的标记对象不能为空，需包含customStyles结构

示例正确格式：

const dates = {
  '2024-05-20': {
    customStyles: {
      container: { backgroundColor: '#ff0000' },
      text: { color: '#ffffff' }
    }
  },
  '2024-05-21': {
    customStyles: {
      container: { backgroundColor: '#00ff00' },
      text: { color: '#000000' }
    }
  }
};

3. 排查自定义dayComponent #

ExpandableCalendar传入的date是xdate实例，而非普通日期对象。如果你的自定义Day组件中有错误访问date属性的逻辑（比如解构时误操作），可能间接触发内部报错。

可以临时替换为极简组件测试：

dayComponent={({ date, marking }) => (
  <Text>{date.day}</Text>
)}

若错误消失，再逐步排查自定义Day组件的问题。

4. 库版本问题 #

该错误可能是react-native-calendars的版本bug导致的。尝试升级到最新稳定版，或回退到已知无此问题的版本（可查看项目GitHub issues确认是否有相关修复记录）。

总结 #

优先尝试移除horizontal和pagingEnabled属性，这是触发该错误的最常见原因。若问题仍存在，再依次检查markedDates格式、自定义组件和库版本。若所有排查无效，则大概率是库本身的bug，可提交issue到项目仓库反馈。

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