【Kevin Learn React Native】--＞iOS 独有组件之 DatePickerIOS

使用 DatePickerIOS 来在 iOS 平台上渲染一个日期/时间选择器。这是一个受约束的(Controlled)组件，所以你必须监听 onDateChange 回调函数并且及时更新 date 属性来使得组件更新，否则用户的修改会立刻被撤销来确保当前显示值和 props.date 一致。

属性

实例

1. 逻辑代码

import React, {Component} from 'react';
import {
  StyleSheet, 
  Text, 
  DatePickerIOS,
  View
} from 'react-native';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      chosenDate: new Date(),
      dateText:''
    };
    this.setDate = this.setDate.bind(this);
  }

  setDate(newDate){
    this.setState({chosenDate: newDate});
  }

  
  render() {
    return (
      <View style = {styles.container}>
        <Text style={styles.text}>{'你选择的时间是：'+ this.state.dateText}</Text>

        <DatePickerIOS 
          date = {this.state.chosenDate}
          mode = {'datetime'}
          onDateChange = {(date) => {
            this.setState({chosenDate:date});
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var date1 = date.getDate();
            var hour = date.getHours();       //获取当前小时数(0-23)
            var mins = date.getMinutes();     //获取当前分钟数(0-59)
            var secs = date.getSeconds();     //获取当前秒数(0-59)
            var msecs = date.getMilliseconds();    //获取当前毫秒数(0-999)
            var s = year+"/"+month+"/"+date1+' '+hour+':'+mins+':'+secs+':'+msecs;
            this.setState({dateText:s});
          }}
        /> 
      </View>
    );
  }

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 30,
    backgroundColor: '#F5FCFF',
  },
  text: {
    marginTop:10,
    marginLeft:5,
    marginRight:5,
    height:30,
    borderWidth:1,
    padding:6,
    borderColor:'green',
    textAlign:'center'
  },
});

2. 效果图