是否存在支持禁用预留日期的React Native日期范围选择器组件？

下面是直接满足需求、优先适配函数式组件的可选方案：

• 首推 react-native-calendars 组件库，本身支持函数式调用，完全覆盖你需要的「自定义禁用指定日期」功能，是目前预订类业务最常用的日历组件选型。
  你只需要将从后端获取的已预订日期，通过 markedDates 属性配置为禁用状态，就能实现已约日期不可点、样式灰化的效果，和你参考的示例效果完全匹配。组件本身自带封装好的日期范围选择器，不需要自己实现范围选择逻辑。
  最简使用示例如下：

  import { DateRangePicker } from 'react-native-calendars';
  import { useState } from 'react';
  
  const BookingRangePicker = () => {
    // 已预订日期配置，实际可从接口拉取后格式化
    const bookedMarks = {
      '2024-06-10': { disabled: true, color: '#f0f0f0', textColor: '#ccc' },
      '2024-06-11': { disabled: true, color: '#f0f0f0', textColor: '#ccc' }
    };
  
    return (
      <DateRangePicker
        markedDates={bookedMarks}
        onCancel={() => {}}
        onConfirm={(range) => {
          // 处理选中的起止日期 range.startDate / range.endDate
        }}
      />
    );
  };
  
  export default BookingRangePicker;
  

• 如果你的项目不需要全量的日历功能，也可以基于该库的基础 Calendar 组件自行封装更轻量化的范围选择器，自定义灵活度更高，完全适配你的业务样式需求。

所有上述方案均支持React Hooks，符合你优先选用函数式组件的要求。

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