每次我调用 OnDayPress 时,react-native-calendar 都会重新呈现到当前月份
react-native-calendar re-renders to the current month every time I invoke OnDayPress
我正在使用 react-native-calendar
,当我通过单击日期调用 onDayPress
时,日历会跳转到当前月份。
我的意思是假设我点击 11 月 12 日,日历跳转到 10 月,也就是当前月份。
export default BookingCalendar = () => {
const [selected, setSelected] = useState()
return (
<View>
<CalendarList
theme={{
dayTextColor: 'black',
todayTextColor: 'black',
selectedDayTextColor: 'black',
selectedDayBackgroundColor: '#FF5D4E',
arrowColor: 'black',
}}
style={styles.calendarStyle}
markedDates={{[selected]: {selected: true, disableTouchEvent: true, selectedDotColor: 'orange'}}}
current={new Date()}
minDate={new Date()}
maxDate={addMonths(6)}
onDayPress={day => setSelected(day.dateString)}
onDayLongPress={(day) => {console.log('selected day', day)}}
monthFormat={'MMM yyyy'}
onMonthChange={(month) => {console.log('month changed', month)}}
horizontal={true}
pagingEnabled={true}
/>
</View>
)
}
我的想法是,每次调用 onDayPress
时,日历都会重新呈现,并将自身重新定位到 current
日期,所以我尝试将今天的日期设置在 useEffect
所以它只在组件安装时渲染一次,但没有任何区别。
将 current prop 设置为所选日期解决了我的问题
我正在使用 react-native-calendar
,当我通过单击日期调用 onDayPress
时,日历会跳转到当前月份。
我的意思是假设我点击 11 月 12 日,日历跳转到 10 月,也就是当前月份。
export default BookingCalendar = () => {
const [selected, setSelected] = useState()
return (
<View>
<CalendarList
theme={{
dayTextColor: 'black',
todayTextColor: 'black',
selectedDayTextColor: 'black',
selectedDayBackgroundColor: '#FF5D4E',
arrowColor: 'black',
}}
style={styles.calendarStyle}
markedDates={{[selected]: {selected: true, disableTouchEvent: true, selectedDotColor: 'orange'}}}
current={new Date()}
minDate={new Date()}
maxDate={addMonths(6)}
onDayPress={day => setSelected(day.dateString)}
onDayLongPress={(day) => {console.log('selected day', day)}}
monthFormat={'MMM yyyy'}
onMonthChange={(month) => {console.log('month changed', month)}}
horizontal={true}
pagingEnabled={true}
/>
</View>
)
}
我的想法是,每次调用 onDayPress
时,日历都会重新呈现,并将自身重新定位到 current
日期,所以我尝试将今天的日期设置在 useEffect
所以它只在组件安装时渲染一次,但没有任何区别。
将 current prop 设置为所选日期解决了我的问题