react-native - react-native-calendar：在自定义日期组件中应用标记类型周期

Question

我需要覆盖日组件，因为我想在日历中使用我自己的自定义日组件。我需要实现如下图所示，但无法找到使用自定义日组件实现此类设计的方法。

如果我们不像下面的代码那样覆盖 day 组件，那么我们成功地实现了上面的设计。

<CalendarList
      markingType={'period'}
      markedDates={{
        '2021-12-15': { marked: true, dotColor: '#50cebb' },
        '2021-12-16': { marked: true, dotColor: '#50cebb' },
        '2021-12-17': {
          startingDay: true,
          color: '#50cebb',
          textColor: 'white',
        },
        '2021-12-18': { color: '#70d7c7', textColor: 'white' },
        '2021-12-19': {
          color: '#70d7c7',
          textColor: 'white',
          marked: true,
          dotColor: 'white',
        },
        '2021-12-20': { color: '#70d7c7', textColor: 'white' },
        '2021-12-21': { endingDay: true, color: '#50cebb', textColor: 'white' },
      }}
    />

但是如果我们覆盖 day 组件，那么markingType 周期就不起作用了。

 <CalendarList
      markingType={'period'}
      markedDates={{
        '2021-12-15': { marked: true, dotColor: '#50cebb' },
        '2021-12-16': { marked: true, dotColor: '#50cebb' },
        '2021-12-17': {
          startingDay: true,
          color: '#50cebb',
          textColor: 'white',
        },
        '2021-12-18': { color: '#70d7c7', textColor: 'white' },
        '2021-12-19': {
          color: '#70d7c7',
          textColor: 'white',
          marked: true,
          dotColor: 'white',
        },
        '2021-12-20': { color: '#70d7c7', textColor: 'white' },
        '2021-12-21': { endingDay: true, color: '#50cebb', textColor: 'white' },
      }}
      dayComponent={({ date, state }) => {
        return (
          <TouchableOpacity style={{ backgroundColor: 'red' }}>
            <Text
              style={{
                textAlign: 'center',
                color: state === 'disabled' ? 'gray' : 'black',
              }}
            >
              {date.day}
            </Text>
          </TouchableOpacity>
        );
      }}
    />

我的工作环境：-

"react-native": "0.64.1",
"react-native-calendars": "^1.1266.0",
 Platfor: android/iOS