React-Native —如何使用react-native-calendars（WIX）选择开始日期和结束日期？

Question

我正在尝试使用react-native-calendars启用日期范围。在我的应用程序上，日历加载了一些“ markedDates”；现在，我需要在不影响这些初始日期的情况下实现开始日期和结束日期功能。不幸的是，我正在努力实现这一目标。关于如何执行此操作的任何想法？

谢谢。

伪代码

• 加载带有标记日期的日历
• 点击开始日期
• 点击结束日期
• 继续

组件

export default class Dates extends Component {
    static navigationOptions = {
        title: 'Choose dates',
    }

    constructor(props) {
        super(props)
        this.state = {
            selected: undefined,
            marked: undefined,
        }
    }

    componentDidMount() {
        this._markDate()
    }

    _markDate = () => {
        nextDay = []

        const marked = {
            [nextDay]: { selected: true, marked: true },
        }

        Util._findShows(resp => {
            resp.map(data => {
                nextDay.push(data.date)
            })
            var obj = nextDay.reduce((c, v) => Object.assign(c, { [v]: { marked: true, dotColor: 'black' } }), {})
            this.setState({ marked: obj })
        })
    }

    _selectDate = obj => {
        this.setState({ selected: obj.dateString })
    }

    render() {
        return (
            <View style={styles.container}>
                <CalendarList
                    // Callback which gets executed when visible months change in scroll view. Default = undefined
                    onVisibleMonthsChange={months => {
                        console.log('now these months are visible', months)
                    }}
                    // Max amount of months allowed to scroll to the past. Default = 50
                    pastScrollRange={0}
                    // Max amount of months allowed to scroll to the future. Default = 50
                    futureScrollRange={12}
                    // Enable or disable scrolling of calendar list
                    scrollEnabled={true}
                    // Enable or disable vertical scroll indicator. Default = false
                    showScrollIndicator={true}
                    markedDates={
                        // [this.state.selected]: { selected: true, disableTouchEvent: true, selectedDotColor: 'orange' },
                        this.state.marked
                    }
                    onDayPress={day => {
                        this._selectDate(day)
                    }}
                />
                <View style={styles.ctaArea}>
                    <TouchableOpacity style={styles.button} onPress={() => this.props.navigation.navigate('Dates')}>
                        <Text style={styles.btTitle}>Continue</Text>
                    </TouchableOpacity>
                </View>
            </View>
        )
    }
}