如何在反应本机日历中设置多个选定的日期颜色？

Question

我在我的项目中使用react-native-calendars。我正在尝试选择多个日期并尝试更改其颜色。当我安慰选定的日期时，我得到了选定的日期。但我无法改变它的颜色。任何帮助都非常感谢。以下是我的代码

Calendar.js

  selectDate(day) {
        let selectedDate = day.dateString;
        if (this.state.dates[selectedDate]) {
          const newDates = this.state.dates;
          delete newDates[selectedDate]
          this.setState({ dates: newDates });
        } else {
          const newDates = this.state.dates;
          newDates[selectedDate] = [
            { selected: true, startingDay: true, color: '#05A081' },
            { selected: true, endingDay: true, color: '#05A081' },
          ]
          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}
            />

以下是控制台结果

NEW_ARRAY 
{2019-09-03: Array(2), 2019-09-04: Array(2), 2019-09-05: Array(2)}
2019-09-03: Array(2)
0: {selected: true, startingDay: true, color: "#05A081"}
1: {selected: true, endingDay: true, color: "#05A081"}
length: 2
2019-09-04: (2) [{…}, {…}]
2019-09-05: (2) [{…}, {…}]

Answer 1

你可以像这样改变颜色。另外，请给the documentation 一个评价。

selectDate(day) {
        let selectedDate = day.dateString;
        if (this.state.dates[selectedDate]) {
          const newDates = this.state.dates;
          delete newDates[selectedDate]
          this.setState({ dates: newDates });
        } else {
          const newDates = this.state.dates;
          newDates[selectedDate] = [
            { selected: true, startingDay: true, color: 'yourColorHere' }, //change color here
            { selected: true, endingDay: true, color: 'yourColorHere' },//change color here
          ]
          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}
            />

Answer 2

  const selectDate=(day)=> {
    let selectedDate = day.dateString;
    let newDates = dates;
    if (dates[selectedDate]) {
      delete newDates[selectedDate]
    } else {
      
      newDates[selectedDate]={selected: true, marked: true, selectedColor: Colors.YELLOW};
      
      
    }
    setdates({...newDates})
  }