我试图在我从 api 调用中获得的 react-native-calendars 中标记日期。有人可以帮忙吗？
<Calendar
markingType={'multi-dot'}
markedDates={this.state.dates}
/>
在构造函数中，我正在维护
this.state = {dates : []}
我已经调用了函数标记（），我在其中映射数据并将日期推入另一个数组，然后执行 setState 作为
this.setState({
dates : {
[attendance] : [
{
key: 'vacation',
color: 'blue',
selectedDotColor: 'red'
}
]
}
})
我正在分享我可以随意使用的代码。PS：我是新手。万分感谢
请使用这个库，它很容易使用自定义日期样式“react-native-calendar-picker”进行自定义
确保标记日期参数是不可变的。如果您更改了标记日期对象内容，但对其的引用未更改，则不会触发日历更新。
请试试;
markedDates={{
'2019-12-9': {
periods: [
{ startingDay: false, endingDay: true, color: '#5f9ea0' },
{ startingDay: false, endingDay: true, color: '#ffa500' },
{ startingDay: true, endingDay: false, color: '#f0e68c' },
]
},
'2019-12-9': {
periods: [
{ startingDay: true, endingDay: false, color: '#ffa500' },
{ color: 'transparent' },
{ startingDay: false, endingDay: false, color: '#f0e68c' },
]
},
}}
实际上，我最近不得不用 react-native-calendars 做同样的事情。这是我编写的用于创建标记日期的函数的简化版本：
createMarkedDates = (dates) => {
let markedEvents = {};
let numEvents = {};
let uniqueDates = [...new Set(dates)]; //remove duplicate event dates
dates.forEach(function (count) { //if multiple events on one date, determine how many events are on each date
numEvents[count] = (numEvents[count] || 0) + 1;
});
uniqueDates.forEach(function (date) {
let dots = [];
let markedData = {};
for (let i = 0; i < numEvents[date]; i++) {
dots.push(event); //add dots for as many events are on that day
}
markedData['dots'] = dots; //set the array of dots
markedEvents[date] = markedData; //add markers to marked dates
});
};
this.setState({markedDates: markedEvents});
}
日期是从 API 传递的日期数组。
这应该为您输出一个带有每个日期标记的标记日期对象，并且如果您需要它，它会在一天中放置多个点，如果它在您的数组中出现多次。
另外，我相信您的日期需要采用 ISO 日期格式 (YYYY-MM-DD)，以便 react-native-calendars 标记日期。
我希望这个例子有帮助！