React Native Calendars中markedDates的color属性不生效问题

原因 #

你使用的color属性在这个版本中仅用于设置日期下方标记点的颜色，并非日期背景色的配置项，所以无法实现你想要的背景色效果。

解决方法 #

要给不同日期设置自定义背景色，需要开启markingType="custom"，然后在markedDates的每个日期对象里通过customStyles配置容器样式：

import {Calendar} from 'react-native-calendars';
...
<Calendar
  // 开启自定义标记模式
  markingType="custom"
  markedDates={{
    '2023-05-05': {
      customStyles: {
        container: {
          backgroundColor: '#ff0000',
          // 可选：添加圆角等样式优化视觉效果
          borderRadius: 6
        },
        text: {
          color: '#ffffff' // 可选：调整日期文字颜色，避免与背景色冲突
        }
      }
    },
    '2023-05-06': {
      customStyles: {
        container: {
          backgroundColor: '#00ff00'
        }
      }
    }
  }}
/>
...

如果你的场景是设置选中日期的背景色，也可以结合selected属性，但selectedColor属于全局配置，无法单独为每个选中日期设置不同颜色，因此上述自定义样式的方式更灵活。

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