如何在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'}]}}