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

Question

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

日历.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

你可以像这样改变颜色。另外，请查看文档。selectDate(day) {&nbsp; &nbsp; &nbsp; &nbsp; let selectedDate = day.dateString;&nbsp; &nbsp; &nbsp; &nbsp; if (this.state.dates[selectedDate]) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const newDates = this.state.dates;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; delete newDates[selectedDate]&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.setState({ dates: newDates });&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const newDates = this.state.dates;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; newDates[selectedDate] = [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { selected: true, startingDay: true, color: 'yourColorHere' }, //change color here&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { selected: true, endingDay: true, color: 'yourColorHere' },//change color here&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.setState({ dates: newDates });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log("NEW_ARRAY", this.state.dates);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp;....&nbsp; &nbsp; <CalendarList&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; minDate={Date.now()}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; pastScrollRange={24}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; futureScrollRange={24}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; markingType={'period'}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onDayPress={(day) => this.selectDate(day)}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; markedDates={this.state.dates}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />

Answer 2

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