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

Question

我m very new to React native. I正在使用 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>
  );
};

标签： react-native

Answer 1

您应该尝试将选定的日期\时间保存在某处，然后您可以在任何您想要的地方显示它。做这样的事情：

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,
  },
});