如何从 react-native-calendar-strip 中的 api 动态设置标记日期？答案

【问题标题】：How to dynamically set marked dates from api in react-native-calendar-strip?如何从 react-native-calendar-strip 中的 api 动态设置标记日期？
【发布时间】：2021-05-06 08:35:42
【问题描述】：

我使用静态设置标记日期，但不知道如何通过循环动态设置

代码：

const markedDatesArray = [

    {
      date: moment('2021-01-22', 'YYYY-MM-DD'),
      dots: [
        {
          color: COLORS.GREEN,
        },
      ],
    },

    {
      date: moment('2021-01-20', 'YYYY-MM-DD'),
      dots: [
        {
          color: COLORS.GREEN,
        },
      ],
    },
  ];



<CalendarStrip
        calendarAnimation={{type: 'sequence', duration: 30}}
        minDate={start}
        maxDate={end}
        daySelectionAnimation={{
          type: 'background',
          duration: 200,
          highlightColor: COLORS.GREEN,
        }}
        onDateSelected={(date) => console.log(date)}
        markedDates={markedDatesArray}
        style={styles.calenderStrip}
        calendarHeaderStyle={styles.calendarHeaderStyle}
        calendarColor={COLORS.WHITE}
        dateNumberStyle={styles.dateNumberStyle}
        dateNameStyle={styles.dateNameStyle}
        highlightDateNumberStyle={styles.highlightDateNumberStyle}
        highlightDateNameStyle={styles.highlightDateNameStyle}
        iconContainer={{flex: 0.1}}
        datesBlacklist={datesBlacklist}
      />

如何动态设置，从 api 获取的日期是：

["2021-02-10", "2021-02-11", "2021-02-11", "2021-02-12"]

【问题讨论】：

标签： android arrays reactjs react-native loops

【解决方案1】：

这里你可以通过循环来完成。

只需在 CalenderStripe 标记之前添加此循环以解析标记日期即可。

解决方案：

let fetchedDates = ["2021-02-10", "2021-02-11", "2021-02-11", "2021-02-12"];
let markedDatesArray = [];

for (let i = 0; i < fetchedDates.length; i++) {
  markedDatesArray.push({
    date: moment(`${fetchedDates[i]}`, "YYYY-MM-DD"),
    dots: [
      {
        color: COLORS.GREEN,
      },
    ],
  });
}

<CalendarStrip
        calendarAnimation={{type: 'sequence', duration: 30}}
        minDate={start}
        maxDate={end}
        daySelectionAnimation={{
          type: 'background',
          duration: 200,
          highlightColor: COLORS.GREEN,
        }}
        onDateSelected={(date) => console.log(date)}
        markedDates={markedDatesArray}
        style={styles.calenderStrip}
        calendarHeaderStyle={styles.calendarHeaderStyle}
        calendarColor={COLORS.WHITE}
        dateNumberStyle={styles.dateNumberStyle}
        dateNameStyle={styles.dateNameStyle}
        highlightDateNumberStyle={styles.highlightDateNumberStyle}
        highlightDateNameStyle={styles.highlightDateNameStyle}
        iconContainer={{flex: 0.1}}
        datesBlacklist={datesBlacklist}
      />

【讨论】：

欢迎您对我的回答投赞成票。