反应本地日历,markedDates未显示

时间:2018-09-11 11:58:20

标签: react-native react-native-calendars

我使用react native calendars尝试使用onVisibleMonthsChange更新每个月的事件,我的状态正在更新正确的数据,但日历显示为空,有什么想法吗?

CalendarList无法使用loadItems(dates)

呈现

使用CalendarList参数之间的事件填充dates。我正在事件缩减工具中创建数据:

        const newItems = {};

        for (let i = 0; i < 180; i++) {
            const time = moment().utc() + i * 24 * 60 * 60 * 1000;

            const strTime = timeToString(time);

            if (events[strTime]) {
                newItems[strTime] = { ...events[strTime] };
            } else {
                newItems[strTime] = {};
            }
        }
        return {
            ...newItems
        };

在我的月份组件中,我从componentDidMount开始称呼它

const {   componentDidMount() {
const {
    credentials: { year, group, id },
    fetchEvents
} = this.props;
const Id = id || group;
fetchEvents(Id);
}

然后我使用loadItems参数将相关日期标记为选定日期:

 loadItems(dates) {
        const { events } = this.props;
        const moment = extendMoment(Moment);
        const lastItemIndex = dates.length;

        const startDate = moment(dates[0].timestamp).startOf("month"),
            endDate = moment(dates[lastItemIndex - 1]).endOf("month");

        const dateRange = moment().range(startDate, endDate);

        newEvents = Object.keys(events).reduce((output, dateString) => {
            if (dateRange.contains(moment(dateString).toDate())) {
                output[dateString] = events[dateString];

                if (!helpers.emptyObject(output[dateString])) {
                    output[dateString].selected = true;
                }
            }

            return output;
        }, {});

        this.setState({
            markedDates: { ...newEvents, ...this.state.markedDates }
        });
    }

链接到仓库:

https://bitbucket.org/matthisco/ejected-calendar/src/7953011ab44b08f60307d051655d8dcb3035a889/?at=feature%2FChunk_event_data

观察到的行为

一个月不显示:

10

环境

  • react-native-calendars@1.19.4
  • react-native@0.55.4

0 个答案:

没有答案