如何使用react-native-modal-datetime-picker进行多个计时并显示

时间:2019-02-11 07:27:46

标签: android react-native datetimepicker

我已经开始学习本机反应,并且是第一次使用react-native-modal-datetime-picker。我试图从timePicker中获取多个时间,但是我没有怎么做。我想为我的应用程序使用5个不同的时间,我也必须显示它。以下是我的代码供您了解我的要求。

    _showDateTimePicker = () => {
            this.setState({ isDateTimePickerVisible: true })
        }

     _hideDateTimePicker = () => this.setState({ isDateTimePickerVisible: false });

 _handleDatePicked = (time) => {
        const selected1 = time.getHours() + ':' + time.getMinutes();
        this.setState({ value1: selected1 })
        this._hideDateTimePicker();
    };

render() {
        return (
            <ScrollView style={styles.container}>

                <View style={styles.dataStyle}>
                    <Text style={styles.textStyle}>valu1 </Text>
                    <Text style={styles.textStyle2}> {this.state.selected1} </Text>
                    <TouchableOpacity style={styles.iconStyle}>
                        <Icon name='edit' color='#212B51' size={25} onPress={this.renderDateTimeModals} />
                    </TouchableOpacity>
                </View>
                <View style={styles.dataStyle}>
                    <Text style={styles.textStyle}>Value2 </Text>
                    <Text style={styles.textStyle2}> {this.state.selected2} </Text>
                    <TouchableOpacity style={styles.iconStyle}>
                        <Icon name='edit' color='#212B51' size={25} onPress={this._showDateTimePicker} />
                    </TouchableOpacity>
                </View>
                <View style={styles.dataStyle}>
                    <Text style={styles.textStyle}>Value3 </Text>
                    <Text style={styles.textStyle2}> {this.state.selected3} </Text>
                    <TouchableOpacity style={styles.iconStyle}>
                        <Icon name='edit' color='#212B51' size={25} onPress={this._showDateTimePicker} />
                    </TouchableOpacity>
                </View>

                <TouchableOpacity
                    style={[styles.buttonContainer, styles.loginButton]}>
                    <Text style={styles.loginText}> Submit </Text>
                </TouchableOpacity>

                 <DateTimePicker
                    isVisible={this.state.isDateTimePickerVisible}
                    onConfirm={this._handleDatePicked}
                    onCancel={this._hideDateTimePicker}
                    mode={'time'}
                    is24Hour={false}
                /> 
            </ScrollView>
        );
    }

我希望选择5个不同的值,并全部显示它们。请先帮助谢谢

0 个答案:

没有答案