在 React Native 中设置时间后无法关闭 DateTimePickerModal

Question

我正在学习在 ReactNative 中设置时间。我能够使用 DateTimePickerModal 的 onConfirm 进程设置时间，但我无法同时关闭 DateTimePicker。
这是来源。

import React, {Component} from 'react';
import{
  Text,
  View,
  Button,
}from 'react-native';
//import DateTimePicker from '@react-native-    community/datetimepicker';
import DateTimePickerModal from "react-native-modal-datetime-picker";


export default class App extends Component<{}>{
  constructor(){
    super()
    this.state={
      vibrate: false,
      date: new Date(),
      isShowDatePicker: false
    }
  }


  render(){
    var {date} = this.state
    return (
      <View style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: "F5FCFF"
      }}>
        <Text>{date.getFullYear()}Y {date.getMonth() + 1}M {date.getDate()}D</Text>

        <Button
        title={'Press'}
        onPress={() => this.setState({ isShowDatePicker: !this.state.isShowDatePicker })} />
        <DateTimePickerModal
          isVisible={this.state.isShowDatePicker}
          mode="date"
          date={this.state.date}
          onConfirm={
            date=>{this.setState({date})}
          }
          onCancel={() => this.setState({ isShowDatePicker: !this.state.isShowDatePicker })}
          headerTextIOS='Please Select Date'
          confirmTextIOS='OK' />

      </View>
    );
  }
}

我想把流程写在OnConfirm里面，但是做不到

      onConfirm={
        date=>{this.setState({date})},
        () => this.setState({ isShowDatePicker: !this.state.isShowDatePicker })
      }

本说明仅关闭window，不设置时间。
如果有人能告诉我如何做到这一点，我将不胜感激。

Answer 1

像这样写你的onConfirm..这将关闭模式

onConfirm={(data) => {
                this.setState({date})
                this.setState({ isShowDatePicker: false })
           }

你的onCancel也是这样

onCancel={() => this.setState({ isShowDatePicker: false })}

不要将状态设置为 !isShowDatePicker 因为我们知道 onCancel 和 onConfirm 我们需要关闭模态..所以将其设置为 false 而不是将其设置为 !isShowDatePicker

同时将您的 Button onPress 更改为此

<Button
    title={'Press'}
    onPress={() => this.setState({ isShowDatePicker:true })} />

查看工作示例 here

在 React Native 中设置时间后无法关闭 DateTimePickerModal

Unable to close the DateTimePickerModal after setting the time in ReactNative

datetimepicker

react-native