根据 React-Native-Calendars 文档,这里是带有硬编码标记日期的测试代码,显示日历上的点:
const FirstDot = { key: 'First', color: 'blue' };
const SecondDot = { key: 'Second', color: 'blue' };
<Calendar
current={new Date()}
markingType={'multi-dot'}
markedDates={{
'2019-04-15': { dots: [FirstDot, SecondDot] },
'2019-04-14': { dots: [FirstDot] },
}}
/>
基本上我想根据数据显示一两个点。假设我正在从 SQLite 检索数据,如何在 React Native 中动态填充标记日期?
this.state = { markedDates: {} }; //how to declare the state object?
//other codes.....
db.transaction((tx) => {
let objMarkedDates = this.state.markedDates;
tx.executeSql('SELECT myDates, dataDots FROM myTable',
[], (tx, results) => {
const len = results.rows.length;
if (len > 0) {
for (let i = 0; i < len; ++i) {
if (results.rows.item(i).dataDots === 2) { //show 2 dots
//How to populate the date and the dots to the object???
}
}
}
});
this.setState({ markedDates: objMarkedDates });
});
<Calendar
current={new Date()}
markingType={'multi-dot'}
markedDates={this.state.markedDates}
/>