react-native-calendars Timeline组件onEventPress初始传undefined问题

可能原因及对应解决办法： #

1. 自定义列表项未正确传递事件对象
   如果你使用了renderTimeLineListItem自定义事件条目，大概率是绑定点击事件时没把当前事件对象传给onEventPress。
   错误示例：

const renderTimeLineListItem = (props) => {
  return (
    <TouchableOpacity onPress={() => props.onEventPress()}>
      {/* 条目内容 */}
    </TouchableOpacity>
  );
};

修正后：

const renderTimeLineListItem = (props) => {
  return (
    <TouchableOpacity onPress={() => props.onEventPress(props.item)}>
      {/* 条目内容 */}
    </TouchableOpacity>
  );
};

2. 事件数据初始化时机不匹配
   如果事件数据是通过异步请求获取的，Timeline组件可能在数据还没加载完成时就已初始化，此时事件条目绑定的是未就绪的数据，导致点击时返回undefined。Fast Refresh后数据已加载完成，所以恢复正常。
   解决办法：给Timeline加条件渲染，确保数据就绪后再渲染：

const [events, setEvents] = useState([]);

useEffect(() => {
  // 模拟异步获取事件数据
  fetchYourEvents().then(res => setEvents(res));
}, []);

return (
  {events.length > 0 ? (
    <Timeline
      events={events}
      onEventPress={(event) => console.log(event)}
      renderTimeLineListItem={renderTimeLineListItem}
    />
  ) : (
    <ActivityIndicator /> // 加载中占位
  )}
);

3. 事件数据缺少唯一key
   如果你的事件对象没有唯一的id或key字段，Timeline组件可能无法正确识别每个事件条目，导致复用异常。
   解决办法：给每个事件对象添加唯一标识，比如：

const events = [
  {
    id: 'event-1', // 唯一key
    title: '会议',
    startTime: ...,
    endTime: ...
  },
  // 其他事件
];

4. 组件版本bug
   react-native-calendars的旧版本可能存在此类初始化绑定的bug，尝试升级到最新稳定版：

npm install react-native-calendars@latest
# 或 yarn
yarn add react-native-calendars@latest

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