React-Native DatePickerIOS使用

DatePickerIOS显示一个时间选择器，通过监听onDateChange方法回调时间date。
属性：
date：选中的时间或日期

maximumDate：限制最大选择时间或日期

minimumDate：限制最小选择时间或日期

minuteInterval：可选的最小的分钟单位enum(1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30)

mode：选择器的模式enum('date', 'time', 'datetime')

onDateChange：function回调的函数，返回一个date

timeZoneOffsetInMinutes：时区，东八区 (new Date()).getTimezoneOffset() * 8 / 60,

创建一个时间选择器：
<pre>
<DatePickerIOS style={{width: 400, height: 100}}
date={this.state.date}
mode="time"
timeZoneOffsetInMinutes={this.state.timeZoneOffsetInHours * 60}
onDateChange={this.onDateChange}
/>
</pre>

分别创建三个模式的选择器：
<pre>
import React, { Component} from 'react';
import {
AppRegistry,
StyleSheet,
View,
DatePickerIOS,
Text,
TextInput,
} from 'react-native';

export default class DatePickerView extends Component {
constructor(props){
super(props);
this.state = {
date: new Date(),
timeZoneOffsetInHours: (new Date()).getTimezoneOffset() * 8 / 60,
}
}
render(){
var sss = this.state.date.toLocaleString();
return (
<View style={{backgroundColor: '#ffaaaa',
flex: 1,
alignItems: 'center',
justifyContent: 'center'}}>
<Text>
当前选择的时间为：{sss}
</Text>
<DatePickerIOS style={{width: 400, height: 100}}
date={this.state.date}
mode="time"
timeZoneOffsetInMinutes={this.state.timeZoneOffsetInHours * 60}
onDateChange={this.onDateChange}
/>
<DatePickerIOS style={{width: 400, height: 100, marginTop: 100}}
date={this.state.date}
mode="date"
timeZoneOffsetInMinutes={this.state.timeZoneOffsetInHours * 60}
onDateChange={this.onDateChange}
/>
<DatePickerIOS style={{width: 400, height: 100, marginTop: 100}}
date={this.state.date}
mode="datetime"
timeZoneOffsetInMinutes={this.state.timeZoneOffsetInHours * 60}
onDateChange={this.onDateChange}
/>
</View>
)
}
onDateChange = (date)=> {
this.setState({
date: date
});
console.log(date)
}
}
AppRegistry.registerComponent('DatePickerView', ()=> DatePickerView);
</pre>

1BECC9C8-1A7C-4275-B32E-44E81B081BE9.png