React Native Calendars多选中日期颜色设置问题求助

我帮你排查下问题，你的代码里有两个关键问题导致选中日期的样式没生效，咱们一个个来调整：

1. markedDates格式不匹配period标记类型 #

你用了markingType={'period'}，但给每个日期赋值的是数组，可period类型要求每个日期对应一个单个对象来配置样式，数组格式组件根本识别不了哦。

给你举个正确的格式例子：

{
  '2019-09-03': { 
    selected: true, 
    startingDay: true, 
    endingDay: true, 
    color: '#05A081' 
  },
  '2019-09-04': { 
    selected: true, 
    color: '#05A081' 
  }
}

要是你选的是连续日期区间，只需要给首尾日期加startingDay和endingDay标记就行，中间的日期不用额外设置这俩属性~

2. 状态更新没遵循不可变性，组件没触发重新渲染 #

你直接修改了原state里的dates对象（比如delete newDates[selectedDate]或者直接给它赋值），这种操作React检测不到状态变化，组件自然不会重新渲染，样式也就更不上啦。

改好后的完整代码： #

selectDate(day) {
  let selectedDate = day.dateString;
  // 先复制原状态对象，绝对不能直接修改原state！
  const newDates = {...this.state.dates};
  
  if (newDates[selectedDate]) {
    // 取消选中就删掉这个日期的配置
    delete newDates[selectedDate];
  } else {
    // 选中日期就添加单个配置对象
    newDates[selectedDate] = {
      selected: true,
      color: '#05A081'
      // 要是你需要标记连续区间的首尾，再根据自己的逻辑加startingDay/endingDay就行
    };
  }
  
  // 用setState更新状态，在回调里打印状态能确保拿到的是最新值
  this.setState({ dates: newDates }, () => {
    console.log("NEW_ARRAY", this.state.dates);
  });
}

// ...

<CalendarList
  minDate={Date.now()}
  pastScrollRange={24}
  futureScrollRange={24}
  markingType={'period'}
  onDayPress={(day) => this.selectDate(day)}
  markedDates={this.state.dates}
/>

额外提个小建议： #

要是你只是想选多个独立的日期，其实也可以试试markingType={'multi'}，不过用period也完全没问题，只要格式对就行。关键就是更新state的时候一定要复制原对象，别直接改原state，不然组件不渲染，啥样式都出不来~

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