React Native Calendars 中解决 ExpandableCalendar 自动选中首日问题

问题背景

在使用 React Native Calendars 库的 ExpandableCalendar 组件时，开发者经常会遇到一个常见问题：当用户滑动到前一周或后一周时，组件会自动选中该周的第一天（通常是周日）。这种默认行为在某些业务场景下可能并不符合需求，特别是当开发者希望用户手动选择日期而不是自动选中时。

问题分析

ExpandableCalendar 组件的这一行为源于其内部的状态管理机制。当用户滑动切换周视图时，组件会自动将当前上下文日期更新为新显示周的第一天。这种设计虽然在某些场景下很有用，但对于需要更精确控制日期选择行为的开发者来说却造成了困扰。

解决方案

核心思路

要解决这个问题，我们需要修改组件的内部逻辑，主要涉及三个方面：

1. 跟踪用户手动选择的日期
2. 修改周渲染逻辑
3. 调整日期状态管理机制

具体实现步骤

第一步：修改 WeekCalendar 组件

在 WeekCalendar 组件中，我们需要添加一个状态来跟踪用户手动选择的日期：

const [selectedDay, setSelectedDay] = useState(date);

const _onDayPress = useCallback((value) => {
    setSelectedDay(value.dateString)
    if (onDayPress) {
        onDayPress(value);
    }
    else {
        setDate?.(value.dateString, UpdateSources.DAY_PRESS);
    }
}, [onDayPress]);

然后将这个选中的日期传递给 Week 组件：

const renderItem = useCallback(({ item }) => {
    const currentContext = sameWeek(date, item, firstDay) ? context : undefined;
    const markings = getCurrentWeekMarkings(item, markedDates);
    return (
        <Week 
            {...others} 
            selectedDay={selectedDay} 
            markedDates={markings} 
            current={item} 
            firstDay={firstDay} 
            style={weekStyle} 
            context={currentContext} 
            onDayPress={_onDayPress} 
            numberOfDays={numberOfDays} 
            timelineLeftInset={timelineLeftInset}
        />
    );
}, [firstDay, _onDayPress, context, date, markedDates]);

第二步：修改 Week 组件

在 Week 组件中，我们需要将选中的日期传递给 getState 函数：

state={getState(day, currXdate, props, disableDaySelection, selectedDay)}

第三步：修改日期状态管理

最后，我们需要修改 day-state-manager.js 文件中的 getState 函数，使其正确处理手动选择的日期：

function convertDateString(dateString) {
    const date = new Date(dateString);
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
}

export function getState(day, current, props, disableDaySelection) {
    const { minDate, maxDate, disabledByDefault, context, selectedDay } = props;
    let state = '';
    
    if(!disableDaySelection && 
       ((context?.date ?? toMarkingFormat(current)) === toMarkingFormat(day)) && 
       convertDateString(day) === selectedDay && 
       day.getDay() === 0) {
        state = 'selected';
    }
    else if (!disableDaySelection && 
             ((context?.date ?? toMarkingFormat(current)) === toMarkingFormat(day)) && 
             day.getDay() !== 0) {
        state = 'selected';
    }
    else if (isToday(day)) {
        state = 'today';
    }
    else if (disabledByDefault) {
        state = 'disabled';
    }
    else if (isDateNotInRange(day, minDate, maxDate)) {
        state = 'disabled';
    }
    else if (!sameMonth(day, current)) {
        state = 'disabled';
    }
    return state;
}

实现原理

这个解决方案的核心在于：

1. 状态跟踪：通过 selectedDay 状态变量跟踪用户手动选择的日期
2. 状态传递：将用户选择的日期通过组件层级向下传递
3. 条件判断：在日期状态管理中，只有当日期是用户手动选择的日期时才会标记为"selected"

特别值得注意的是对周日(day.getDay() === 0)的特殊处理，这确保了周日的自动选中行为被正确禁用。

注意事项

1. 使用 patch-package 应用这些修改后，每次安装依赖时都需要重新应用补丁
2. 如果库版本更新，可能需要重新检查这些修改是否仍然适用
3. 这种修改方式属于对第三方库的直接修改，在团队开发中应该做好文档记录

替代方案

如果不想直接修改库代码，也可以考虑：

1. 使用 WeekCalendar 替代 ExpandableCalendar
2. 实现自定义的日历组件
3. 通过样式覆盖的方式视觉上隐藏自动选中的效果

不过这些替代方案各有优缺点，直接修改库代码通常能提供最精确的控制。

总结

通过上述修改，我们成功禁用了 ExpandableCalendar 组件自动选中每周第一天的行为，同时保留了用户手动选择日期的功能。这种解决方案既满足了业务需求，又保持了组件的其他有用功能。对于需要精确控制日历行为的 React Native 开发者来说，这种深度定制的方法非常值得参考。