react-native - 如何覆盖 react-native-calendar 的样式表

Question

任何人都知道如何覆盖样式表react-native-calendar并在标记的日子里实现红色X而不是defaults red circle背景 https://github.com/wix/react-native-calendars

我希望那些红色圆圈是一个红十字

Answer 1

您可以更改 MarkedDatas 的 'selectedstyle' 属性。例子：

   markedDates={
                {
                  '2020-02-10': {selected: true, selectedColor: 'red'},
                  '2020-02-19': {selected: true, selectedColor: 'red'},
                  '2020-02-21': {selected: true, selectedColor: 'red'},
                  '2020-02-24': {selected: true, selectedColor: 'red'},
                  '2020-02-29': {selected: true, selectedColor: 'red'},
                }
               }

Answer 2

如果您仔细查看文档“自定义标记允许您使用自定义样式自定义每个标记”。我猜你会用图像或 svg 图形替换背景。

<Calendar
  // Date marking style [simple/period/multi-dot/single]. Default = 'simple'
  markingType={'custom'}
  markedDates={{
    '2018-03-28': {
      customStyles: {
        container: {
          backgroundColor: 'green',
        },
        text: {
          color: 'black',
          fontWeight: 'bold'
        },
      },
    },
    '2018-03-29': {
      customStyles: {
        container: {
          backgroundColor: 'white',
          elevation: 2
        },
        text: {
          color: 'blue',
        },
      }
    }}}
/>