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

Question

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

先感谢您。

伪代码

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

零件

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>
        )
    }
}