代码之家 › 专栏 › 技术社区 › devedv

标记多个日期动态响应本机WIX

react-native

1

devedv · 技术社区 · 8 年前

我使用的是反应本地日历。此库提供了在将标记参数传递给日历对象后在日历上标记日期的功能。我尝试传递一组对象,但没有发送多个日期,如下所示,也没有成功。

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

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

1 回复 | 直到 8 年前

1

4

Kirankumar Dafda 7 年前

有一种方法可以创建一个您想要从日期数组创建的对象,

选项正在使用 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}
    ...
/>

查看 question 我也要同样的,所以