如何动态更改 react-native-calendar 的项目属性中日期键的日期

Question

我正在尝试更改反应本机日历的项目属性中的日期。 从文档中，它显示它需要一个日期字符串作为键，然后需要为该特定日期显示一个对象数组。

像这样的东西。

<Agenda
items: {{
'2019-10-12': [],
'2019-10-13': [{}, {}],
'2019-10-14': [{}],
'2019-10-15': []
}}
/>

但是，我不想对日期进行硬编码。我想要的是显示下周的日期。这是我尝试过的方法

我使用

new currentDate = new Date();

我将这个日期传递到每周项目中，以获取我的每周项目对象。 下面的函数使用另外两个称为addDays和dateToString的函数来正确呈现日期。

const weeklyItems = (date) => {
const day1 = dateToString(addDays(date, 1));
const day2 = dateToString(addDays(date, 2));
const day3 = dateToString(addDays(date, 3));
const day4 = dateToString(addDays(date, 4));
const day5 = dateToString(addDays(date, 5));
const day6 = dateToString(addDays(date, 6));
const currentDate = dateToString(date);
return {
currentDate : [],
day1: [],
day2: [],
day3: [],
day4: [],
day5: [],
day6: []
}
}

addDays和dateToString是我的助手函数：

function addDays(date, days) {
var result = new Date(date);
result.setDate(result.getDate() + days);
return result;
}

此函数将日期对象转换为"YYYY-MM-DD"的形式，这是Agenda所要求的

function dateToString (date) {
const newString  = moment(date).format('YYYY-MM-DD');
return newString.toString()
}

我已经检查了我的日期是否正确，他们都结账了。我还使用currentDate和day6作为minDate的对象，并为AgendamaxDate道具，它们按预期工作。

完成此操作后，我的Agenda现在如下所示：

<Agenda
minDate = {currentDate}
maxDate = {day6}
selected = {currentDate}
items: {weeklyItems(currentDate)}
renderEmptyDate={() => {return (<View/>);}}
/>

这使它停止工作。我知道我的每周项目中有空数组，但现在我只是想让日期工作，不幸的是它们不是。任何帮助将不胜感激。

Answer 1

我在移动设备上，所以我无法运行此代码...

尝试像这样返回日期对象：

return {
[currentDate] : [],
[day1]: [],
...
}

您还可以重写 weeklyItems 函数以从 0 迭代到 6，并将属性动态设置为将返回的对象。

比在组件中：

// somewhere in your js
// const dates = weeklyItems(currentDate)
// const minDate = dateToString(date)
// const maxDate = dateToString(addDays(date, 6))
<Agenda
minDate = {minDate}
maxDate = {maxDate}
selected = {minDate}
items: {dates}
renderEmptyDate={() => {return (<View/>);}}
/>