react-native-calendar-strip运行异常，如何实现类谷歌日历的周条交互？

选中效果缺失修复 #

selectedDate属性未绑定更新后的状态，导致选中值永远固定为初始今日：

1. 初始化选中状态为当日：

const [selectedDateString, setSelectedDateString] = useState(moment().format(DATE_FORMAT))

2. 修改CalendarStrip对应属性：

selectedDate={moment(selectedDateString, DATE_FORMAT)}

今日红色不显示修复 #

高亮样式优先级高于自定义日期样式，且原有逻辑未判断选中状态：
修改customDatesStyles逻辑如下：

customDatesStyles={(date) => {
  const dateStr = moment(date).format(DATE_FORMAT)
  // 选中日期优先走高亮样式
  if (dateStr === selectedDateString) return {}
  const isToday = moment().format(DATE_FORMAT) === dateStr
  if (isToday) {
    return {
      dateNameStyle: { color: 'red', ...DATES_STYLE },
      dateNumberStyle: { color: 'red', ...DATES_STYLE },
    }
  }
  return {}
}}

自定义顶部控件无响应修复 #

你自定义的顶部箭头、Today按钮需绑定对应调用逻辑，使用组件ref的scrollToDate方法实现跳转：

// 左箭头跳转上月首日所在周
const handlePrev = () => {
  const prevMonthFirst = moment().subtract(1, 'month').startOf('month')
  dateStripRef.current.scrollToDate(prevMonthFirst, { animated: true })
}

// 右箭头跳转下月首日所在周
const handleNext = () => {
  const nextMonthFirst = moment().add(1, 'month').startOf('month')
  dateStripRef.current.scrollToDate(nextMonthFirst, { animated: true })
}

// Today按钮跳转至当日并更新选中状态
const handleToday = () => {
  const todayStr = moment().format(DATE_FORMAT)
  setSelectedDateString(todayStr)
  dateStripRef.current.scrollToDate(moment(todayStr, DATE_FORMAT), { animated: true })
}

周结束日期异常修复 #

库返回的ISO周默认结束为周六，直接加1天即可得到周日：

onWeekChanged={(start, end) => {
  setVisibleWeekRange([
    start.format(DATE_FORMAT),
    end.add(1, 'day').format(DATE_FORMAT),
  ])
}}

修改后完整组件代码 #

<CalendarStrip
  ref={dateStripRef}
  scrollable={true}
  scrollerPaging={true}
  startingDate={startingDate}
  useIsoWeekday={true}
  selectedDate={moment(selectedDateString, DATE_FORMAT)}
  onDateSelected={(date) =>
    setSelectedDateString(date.format(DATE_FORMAT))
  }
  scrollToOnSetSelectedDate={false}
  onWeekChanged={(start, end) => {
    setVisibleWeekRange([
      start.format(DATE_FORMAT),
      end.add(1, 'day').format(DATE_FORMAT),
    ]);
  }}
  style={{ height: STRIP_HEIGHT }}
  calendarColor="white"
  styleWeekend={false}
  upperCaseDays={false}
  customDatesStyles={(date) => {
    const dateStr = moment(date).format(DATE_FORMAT)
    if (dateStr === selectedDateString) return {}
    const isToday = moment().format(DATE_FORMAT) === dateStr
    if (isToday) {
      return {
        dateNameStyle: { color: 'red', ...DATES_STYLE },
        dateNumberStyle: { color: 'red', ...DATES_STYLE },
      };
    }
    return {}
  }}
  dateNameStyle={{ color: 'gray', ...DATES_STYLE }}
  dateNumberStyle={{ color: 'gray', ...DATES_STYLE }}
  highlightDateNameStyle={{
    color: 'black',
    ...DATES_STYLE,
    fontWeight: '700',
  }}
  highlightDateNumberStyle={{
    color: 'black',
    ...DATES_STYLE,
    fontWeight: '700',
  }}
  markedDates={data.map((r) => ({
    date: moment(r[0]),
    dots: [{ color: 'red' }],
  }))}
  markedDatesStyle={{
    width: 5,
    height: 5,
    borderRadius: 2.5,
  }}
  leftSelector={[]}
  rightSelector={[]}
  showMonth={false}
/>

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