javascript - 如何在 React Native Calendars 上选择日期范围

Question

我正在使用 React Native Calender，只有当我按下它两次时才会选择日期，但不会在第一次点击时被选中。我也希望能够使用句点标记功能，但不确定如何实现startingDay并endDay放入数组。

    const [selected, setSelected] = useState([new Date()])    
    const [booking, setBooking] = useState({})    
    const [currentMonth, setMonth] = useState()
    const select = day => {
        let markedDay = day.dateString
        setSelected(day => [...selected, markedDay])

        let obj = selected.reduce((c, v) => Object.assign(c, {[v]: { selected: true, marked: true, disableTouchEvent: true }}), {})
        setBooking(obj)
    }

    return (
        <View style={styles.container}> 
            <CalendarList 
                theme={{
                    dayTextColor: 'black',  
                    todayTextColor: 'black',  
                    selectedDayTextColor: 'black', 
                    selectedDayBackgroundColor: 'red',
                    arrowColor: 'black',                    
                }}
                style={styles.calendarStyle}
                markedDates={booking}
                // Initially visible month. Default = Date()
                current={selected[selected.length - 1]}
                // Minimum date that can be selected, dates before minDate will be grayed out. Default = undefined
                minDate={new Date()}
                // Maximum date that can be selected, dates after maxDate will be grayed out. Default = undefined
                maxDate={addMonths(6)}
                // Handler which gets executed on day press. Default = undefined
                onDayPress={select}
                // Handler which gets executed on day long press. Default = undefined
                onDayLongPress={(day) => {console.log('selected day', day)}}
                // Month format in Style title. Formatting values: http://arshaw.com/xdate/#Formatting
                monthFormat={'MMM yyyy'}
                // Handler which gets executed when visible month changes in calendar. Default = undefined
                onMonthChange={(month) => {console.log('month changed', month)}}
                // Hide month navigation arrows. Default = false
                hideArrows={false}
                // Replace default arrows with custom ones (direction can be 'left' or 'right')
                // renderArrow={(direction) => (<View style={{ backgroundColor: 'black', width: 40, height: 50 }} />)}
                // Do not show days of other months in month page. Default = false
                hideExtraDays={true}
                // If hideArrows=false and hideExtraDays=false do not switch month when tapping on greyed out
                // day from another month that is visible in calendar page. Default = false
                disableMonthChange={true}
                // If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday.
                firstDay={1}
                // Hide day names. Default = false
                hideDayNames={false}
                // Show week numbers to the left. Default = false
                showWeekNumbers={false}
                // Handler which gets executed when press arrow icon left. It receive a callback can go back month
                onPressArrowLeft={substractMonth => substractMonth()}
                // Handler which gets executed when press arrow icon left. It receive a callback can go next month
                onPressArrowRight={addMonth => addMonth()}
                // Enable horizontal scrolling, default = false
                horizontal={true}
                // Enable paging on horizontal, default = false
                pagingEnabled={true}
                // Date marking style [simple/period/multi-dot/custom]. Default = 'simple'
            />
        </View>

例如，日期集合必须分配参数以通过以下方式指示它的开始日期或结束日期：

// Collection of dates that have to be colored in a special way. Default = {}
  markedDates={{
    '2012-05-20': {textColor: 'green'},
    '2012-05-22': {startingDay: true, color: 'green'},
    '2012-05-23': {selected: true, endingDay: true, color: 'green', textColor: 'gray'},
    '2012-05-04': {disabled: true, startingDay: true, color: 'green', endingDay: true}
  }}

我尝试了以下作为markedDates属性，但没有奏效：

markedDates={{[selected]: [{startingDay: true, color: '#42aaf4', selected: true}, {selected: true, endingDay: true, color: '#42aaf4', textColor: 'white'}]}}

标签： javascriptreactjsreact-nativereact-native-calendars