我正在尝试创建一个移动应用程序,该应用程序包含一个获取出生日期的字段。不幸的是DateTimePicker module没有给我输出。正如它说的很旧,我用过
<RNDateTimePicker mode="date" value={new Date()} />
在我的实现中。它显示了日期时间选择器,但我无法将其输出输入文本字段。如果您能为我提供有关如何使用RNDateTimePicker的示例,我将不胜感激。以下是我正在使用的代码。
import React from 'react';
import { StyleSheet, Text, View, TextInput, TouchableOpacity, Image } from 'react-native';
import RNDateTimePicker from '@react-native-community/datetimepicker';
export default class RegistrationForm extends React.Component {
render() {
return (
<View style={styles.reg_form}>
<TextInput style={styles.textinput} placeholder="Name you want us to call you" underlineColorAndroid={'transparent'} />
{/* Field to put DOB */}
<TextInput style={styles.textinput} placeholder="Date of birth" underlineColorAndroid={'transparent'} />
{/* RNDateTimePicker */}
<RNDateTimePicker mode="date" value={new Date()} />
{/* need to populate the output of this datetimepicker in DOB inputText */}
<TextInput style={styles.textinput} placeholder="email address" underlineColorAndroid={'transparent'} autoCompleteType="email" />
</View>
);
}
}
const styles = StyleSheet.create({
reg_form: {
flex: 1,
alignSelf: 'stretch',
paddingLeft: 50,
paddingRight: 50,
backgroundColor: '#fff',
paddingTop: 100,
},
textinput: {
alignSelf: 'stretch',
height: 40,
marginBottom: 20,
borderColor: "#5d5959",
borderBottomWidth: 1,
color: "#5d5959"
},
});
您应该在date
中放置一个state
值,以便您可以使用事件处理程序对其进行更新并将其传递给RNDateTimePicker
组件。
然后在setDate()
功能中,处理事件并用所选值更新this.state.date
。
例如: