如何编程控制react-native-calendars的ExpandableCalendar展开/收起

解决方法 #

1. 正确获取ExpandableCalendar实例的ref #

你遇到的ref无法正确获取的问题，根源是当前使用的react-native-calendars@1.1266.0版本中，asCalendarConsumer高阶组件存在实现缺陷：代码中定义了saveRef方法但实际未调用，直接将ref={this.contentRef}绑定到内部组件，导致contentRef始终无法被正确赋值。
最稳妥的解决方式是直接引入未被高阶组件包裹的原始ExpandableCalendar组件，绕开HOC的ref拦截：

// 直接引入未被asCalendarConsumer包裹的原始组件
import ExpandableCalendar from 'react-native-calendars/src/expandableCalendar/ExpandableCalendar';

此时直接绑定的ref就会指向原始ExpandableCalendar组件实例，示例代码如下：

export const MyScreen = () => {
  const calendarRef = useRef<ExpandableCalendar>(null);

  // 切换日历展开/关闭状态
  const toggleCalendar = () => {
    if (calendarRef.current) {
      const currentPosition = calendarRef.current.getPosition();
      calendarRef.current.setPosition(currentPosition === 'open' ? 'closed' : 'open');
    }
  }

  return (
      <CalendarProvider date={new Date()}>
          <ExpandableCalendar ref={calendarRef} />
          <Button onPress={toggleCalendar} title="切换日历状态" />
      </CalendarProvider>
  )
}

2. 控制展开/收起的实现方案 #

原始ExpandableCalendar组件的setPosition方法完全可用，支持传入三个参数控制状态：

• 'open'：完全展开日历
• 'closed'：收起日历，仅显示周条
• 'today'：滚动定位到今天日期的位置
  如果不想直接引入内部原始组件，也可以手动修改asCalendarConsumer的源码，将render函数中内部组件的ref绑定改为ref={this.saveRef}，即可正常通过外层ref的contentRef属性拿到内部组件实例。

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