React native 如何在react native的文本输入中显示选定的日期和时间？

我是个新来的本地人。我使用react native community/datetimepicker库，我发现它非常混乱。下面是我的代码，我应该添加什么才能使其正常工作并在屏幕上显示选定的日期和时间？谢谢你的帮助

import React, {useState} from 'react';
import {View, Button, Platform} from 'react-native';
import DateTimePicker from '@react-native-community/datetimepicker';
 
export const App = () => {
  const [date, setDate] = useState(new Date(1598051730000));
  const [mode, setMode] = useState('date');
  const [show, setShow] = useState(false);
 
  const onChange = (event, selectedDate) => {
    const currentDate = selectedDate || date;
    setShow(Platform.OS === 'ios');
    setDate(currentDate);
  };
 
  const showMode = (currentMode) => {
    setShow(true);
    setMode(currentMode);
  };
 
  const showDatepicker = () => {
    showMode('date');
  };
 
  const showTimepicker = () => {
    showMode('time');
  };
 
  return (
    <View>
      <View>
        <Button onPress={showDatepicker} title="Show date picker!" />
      </View>
      <View>
        <Button onPress={showTimepicker} title="Show time picker!" />
      </View>
      {show && (
        <DateTimePicker
          testID="dateTimePicker"
          value={date}
          mode={mode}
          is24Hour={true}
          display="default"
          onChange={onChange}
        />
      )}
    </View>
  );
};

import React，{useState}来自“React”；
从“react native”导入{视图、按钮、平台}；
从“@react native community/DateTimePicker”导入DateTimePicker；
导出常量应用=（）=>{
const[date，setDate]=useState（新日期（1598051730000））；
const[mode，setMode]=useState（'date'）；
const[show，setShow]=useState（false）；
const onChange=（事件，selectedDate）=>{
const currentDate=所选日期| |日期；
设置显示（Platform.OS=='ios'）；
设置日期（currentDate）；
};
常量显示模式=（当前模式）=>{
设置显示（正确）；
设置模式（当前模式）；
};
常量showDatepicker=（）=>{
显示模式（“日期”）；
};
常量showTimepicker=（）=>{
显示模式（“时间”）；
};
返回(
{show&&(
)}
);
};

您应该尝试将所选日期\时间保存在某个地方，然后可以在任何地方显示它。这样做：

import React, { useState } from "react";
import { Button, Text, View, StyleSheet, TouchableOpacity } from "react-native";
import DateTimePickerModal from "react-native-modal-datetime-picker"; //install and import
import { SafeAreaView } from "react-native";
 
 
export const Picker = () => {
 
  const [selectedDate, setselectedDate] = useState("");
  const [selectedTime, setselectedTime] = useState("");
 
  const [isDatePickerVisible, setDatePickerVisibility] = useState(false);
  const [isTimePickerVisible, setTimePickerVisibility] = useState(false);
 
  const showDatePicker = () => {
    setDatePickerVisibility(true);
  };
 
  const hideDatePicker = () => {
    setDatePickerVisibility(false);
  };
 
  const showTimePicker = () => {
    setTimePickerVisibility(true);
  };
 
  const hideTimePicker = () => {
    setTimePickerVisibility(false);
  };
 
  const handleDate = (date) => {
    setselectedDate(date.toDateString());
    hideDatePicker();
  };
 
 
  const handleTime = (time) => {
    setselectedTime(time.toLocaleTimeString());
    hideTimePicker();
  };
 
  return (
      <SafeAreaView>
        <View style={styles.container}>
          <View>
            <Button title="Show Date Picker" onPress={showDatePicker} />
            <DateTimePickerModal
                isVisible={isDatePickerVisible}
                mode="date"
                onConfirm={handleDate}
                onCancel={hideDatePicker}
                minimumDate={new Date()}
                maximumDate={new Date()}
            />
          </View>
          <View>
            <Button title="Show Time Picker" onPress={showTimePicker} />
            <DateTimePickerModal
                isVisible={isTimePickerVisible}
                mode="time"
                onConfirm={handleTime}
                onCancel={hideTimePicker}
            />
          </View>
          <View>
            <Text>{selectedDate}</Text>
            <Text>{selectedTime}</Text>
          </View>
        </View>
      </SafeAreaView>
  );
};
 
const styles = StyleSheet.create({
  container: {
    paddingTop: 300,
  },
});

import React，{useState}来自“React”；
从“react native”导入{按钮、文本、视图、样式表、TouchableOpacity}；
从“react native Model datetime picker”导入DateTimePickerModel//安装和导入
从“react native”导入{SafeAreaView}；
导出常量选择器=（）=>{
常量[selectedDate，setselectedDate]=useState（“”）；
常量[selectedTime，setselectedTime]=useState（“”）；
const[IsDatePickServices，SetDatePickServices]=useState（false）；
const[isTimePickerVisible，setTimePickerVisibility]=useState（false）；
常量showDatePicker=（）=>{
SetDatePickServiceability（true）；
};
常量hideDatePicker=（）=>{
SetDatePickServiceability（false）；
};
常量showTimePicker=（）=>{
SetTimePickServiceability（true）；
};
常量hideTimePicker=（）=>{
SetTimePickServiceability（false）；
};
const handleDate=（日期）=>{
setselectedDate（date.toDateString（））；
hideDatePicker（）；
};
const handleTime=（时间）=>{
设置SelectedTime（time.toLocaleTimeString（））；
hideTimePicker（）；
};
返回(
{selectedDate}
{selectedTime}
);
};
const styles=StyleSheet.create({
容器：{
paddingTop:300，
},
});

您好，谢谢您的回答，我已将您建议的代码添加到现有代码中，但不起作用没有错误，但所选日期和时间根本没有显示，我认为onChange方法没有任何作用。我可以给你写个私人地址并发送代码吗？是的，你可以粘贴代码并在这里共享链接。检查这个我认为它应该做你想做的事情。是的，现在工作正常。谢谢，你知道如何指定最长日期吗？