我已经开始学习本机反应,并且是第一次使用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个不同的值,并全部显示它们。请先帮助谢谢