react-native - 如何在 react-native-calendars 包中设置滚动周历的日期

Question

我正在尝试使用 react-native-calendars 包中的 WeekCalendar。我可以查看 WeekCalendar 并滚动它。但是，我希望水平滚动 - currentDate 应该更新为当周的日期，并且应该在 UI 上更新。我该怎么做？

我能够找到 onclick 的解决方案，但我希望滚动当前日期应该是该周的日期。

<WeekCalendar
              firstDay={1}
              current={selectedDateOfTheWeek}
              onDayPress={(day, localDay) => {
                changeSelectedDateFromCalendar(day.dateString, false);
              }}
              hideExtraDays={false}
              pastScrollRange={24}
              futureScrollRange={24}
              markedDates={{
                [selectedDateOfTheWeek]: {
                  selected: true,
                  selectedColor: "#8660ce"
                }
              }}
            />

selectedDateOfTheWeek 以 'YYYY-MM-DD' 格式存储日期。我正在使用 Redux 来管理状态。

Answer 1

用 <CalendarProvide 包装你的周历并使用 onDateChanged 事件

<CalendarProvider
                                        date={this.state.selectedDate.dateString}
                                        onDateChanged={this.onDateChanged}
    
                                        markedDates={{
                                            ...this.state.markedDates,
                                            [this.state.selectedDate.dateString]: {
                                                selected: true,
                                            },
                                        }}
                                    >
                                        <WeekCalendar
                                            testID={testIDs.weekCalendar.CONTAINER}
                                            hideDayNames={true}
                                            firstDay={1}
                                            dayComponent={this.renderDateWeek}
                                            theme={calendarThemes}
                                            calendarWidth={screenWidth}
                                            allowShadow={false}
                                            markedDates={{
                                                ...this.state.markedDates,
                                                [this.state.selectedDate.dateString]: {
                                                    selected: true,
                                                },
                                            }}
                                            pastScrollRange={(new Date().getFullYear() - 1900) * 12}
                                            futureScrollRange={(2099 - new Date().getFullYear()) * 12}
                                            style={[styles.calendar, { paddingBottom: 20, paddingLeft: 0, paddingRight: 0 }]}
                                            onDayPress={(date) => this.changeDate(date.dateString)}
                                        />
    
                                    </CalendarProvider>