日历标记react-native-calendars

Question

如何在用户单击日期时显示新标记？我确信我只是在文档中遗漏了一些参考，但我希望在正确的方向上有一个指针。

我使用的是react-native-calendars (https://github.com/wix/react-native-calendars)库和它们的样板代码。

        <Calendar
            // Collection of dates that have to be colored in a special way. Default = {}
            markedDates={{
                '2021-05-20': {textColor: 'green'},
                '2021-05-22': {startingDay: true, color: 'green'},
                '2021-05-23': {selected: true, endingDay: true, color: 'green', textColor: 'gray'},
                '2021-05-04': {disabled: true, startingDay: true, color: 'green', endingDay: true}
            }}
            // Date marking style [simple/period/multi-dot/custom]. Default = 'simple'
            markingType={'period'}
        />

目前，当我单击某个日期时，没有任何反应。我猜我应该检测到一次点击并相应地改变markedDates字典，但我不知道该怎么做。有没有onMarked回调方法或者我可以使用的东西？

Answer 1

好的，我在这里做的是，当我点击某一天时，它标志着从你点击到day+4的那一天开始的4天(这是为了例子，但你可以根据你的用例调整代码)：

另外，我使用moment来添加日期和格式化日期。您可以使用另一个日期库

import React, { useState } from "react";
import {Calendar} from 'react-native-calendars';
import moment from 'moment';

const App = () => {
  const [markedDates, setMarkedDates] = useState({
    '2021-01-20': {textColor: 'green'},
    '2021-01-22': {startingDay: true, color: 'green'},
    '2021-01-23': {selected: true, endingDay: true, color: 'green', textColor: 'gray'},
    '2021-01-04': {disabled: true, startingDay: true, color: 'green', endingDay: true}
  })

  const handleDayPress = (day) => {
    setMarkedDates({
      [day.dateString]: {
        startingDay: true,color: 'green'
      },
      [moment(day.dateString).add(1, 'days').format('YYYY-MM-DD')]: {
        color: 'green'
      },
      [moment(day.dateString).add(2, 'days').format('YYYY-MM-DD')]: {
        color: 'green'
      },
      [moment(day.dateString).add(3, 'days').format('YYYY-MM-DD')]: {
        endingDay: true,color: 'green'
      }
    })
  }

  return (
    <Calendar
      markedDates={markedDates}
      markingType={'period'}
      onDayPress={handleDayPress}
    />
  )
}

export default App;