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

问题描述

限时删除！！

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

I'm using react-native-calendars. This library provides ability to mark dates on the calendar once mark parameter is passed to calendar object. I tried passing an array of objects but didn't worked sending multiple dates as below didn't worked as well.

如何在上面动态标记多个日期?

How to dynamically mark multiple dates on it?

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
          }}
    />

推荐答案

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

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

Option is using reduce to convert the array into an object and just follow the code i have implemented using pure 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 上也有同样的要求

See the question I have asked for the same on SO

这篇关于标记多个日期动态反应本机 wix的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

1403页，肝出来的..