如何在ReactNative中使用DateTimepicker在文本中显示日期？

在React Native中使用DateTimePicker来显示日期的方法如下：

首先，确保你已经安装了React Native的开发环境，并创建了一个React Native项目。
在项目的根目录下，使用以下命令安装@react-native-community/datetimepicker库：

npm install @react-native-community/datetimepicker --save

在需要使用DateTimePicker的组件文件中，导入DateTimePicker组件：

import DateTimePicker from '@react-native-community/datetimepicker';

在组件的state中添加一个日期的属性，用于存储选择的日期：

state = {
  date: new Date(),
};

在组件的render方法中，添加一个文本输入框和一个按钮，用于触发DateTimePicker的显示：

render() {
  return (
    <View>
      <TextInput
        value={this.state.date.toDateString()} // 将日期对象转换为字符串显示在文本框中
        editable={false} // 禁止编辑文本框
      />
      <Button title="选择日期" onPress={this.showDatePicker} />
      {this.state.showDatePicker && (
        <DateTimePicker
          value={this.state.date}
          mode="date"
          onChange={this.handleDateChange}
        />
      )}
    </View>
  );
}

在组件中添加两个方法，用于显示和处理DateTimePicker的选择结果：

showDatePicker = () => {
  this.setState({ showDatePicker: true });
};

handleDateChange = (event, date) => {
  if (date !== undefined) {
    this.setState({ date, showDatePicker: false });
  } else {
    this.setState({ showDatePicker: false });
  }
};

最后，记得在组件的构造函数中绑定这两个方法的this指向：

constructor(props) {
  super(props);
  this.state = {
    date: new Date(),
    showDatePicker: false,
  };
  this.showDatePicker = this.showDatePicker.bind(this);
  this.handleDateChange = this.handleDateChange.bind(this);
}

通过以上步骤，你就可以在React Native中使用DateTimePicker来显示日期，并将选择的日期显示在文本框中了。

腾讯云相关产品和产品介绍链接地址：