标记多个日期动态反应本机 wix

Question

我正在使用 react-native-calendars。一旦将标记参数传递给日历对象，该库就提供了在日历上标记日期的能力。我尝试传递一组对象，但没有发送多个日期，如下所示。

如何在其上动态标记多个日期？

var nextDay =['2018-06-01',
       '2018-06-05',
       '2018-06-08',  
       '2018-06-07',
       '2018-06-18',
       '2018-06-17',
       '2018-05-28',
       '2018-05-29'];

   const mark = {
    [nextDay]: {selected: true, marked: true}
   };

this.state(
{
mark: mark,
})

          <Calendar
      onDayPress={this.onDayPress}      
      current={new Date()}
      minDate={'2018-05-24'}
      onMonthChange={(month) => {console.log('month changed', month)}}
      hideArrows={false}
      hideExtraDays={true}
      disableMonthChange={false}
      firstDay={1}
      hideDayNames={false}
      showWeekNumbers={false}
      onPressArrowLeft={substractMonth => substractMonth()}
      onPressArrowRight={addMonth => addMonth()}
      markedDates={this.state.mark}

          theme={{
            backgroundColor: '#ffffff',
            calendarBackground: '#ffffff',
            textSectionTitleColor: '#b6c1cd',
            selectedDayBackgroundColor: '#00adf5',
            selectedDayTextColor: '#ffffff',
            todayTextColor: '#00adf5',
            dayTextColor: '#2d4150',
            textDisabledColor: '#d9e1e8',
            dotColor: '#00adf5',
            selectedDotColor: '#ffffff',
            arrowColor: 'orange',
            monthTextColor: 'blue',
            textMonthFontWeight: 'bold',
            textDayFontSize: 16,
            textMonthFontSize: 16,
            textDayHeaderFontSize: 16
          }}
    />

Answer 1

有一个技巧可以创建一个你想从日期数组创建的对象，

选项reduce用于将数组转换为对象，只需按照我使用纯 javascript 实现的代码即可

成功获取 nextDay 数组中的值后调用函数

constructor(props){
    super(props);
    this.state = {
        marked: null,
    };
}
componentDidMount() {
    this.anotherFunc();
}

// call function after you successfully get value in nextDay array

anotherFunc = () => {
    var obj = nextDay.reduce((c, v) => Object.assign(c, {[v]: {selected: true,marked: true}}), {});
    this.setState({ marked : obj});
}

现在将此状态添加到您的日历元素

<Calendar
    ...
    markedDates={this.state.marked}
    ...
/>

见问题我已要求对SO相同