怎么使用 ReactNative DatePickerIOS?
1.先来熟悉下DatePickerIOS组件的属性
date 被选中的日期
maximumDate 可选的最大日期
minimumDate 可选的最小日期
minuteInterval enum(1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30) 最小的分钟单位。
mode enum('date', 'time', 'date time') 选择器模式
onDateChange 用户修改日期或时间时调用此回调函数
timeZoneOffsetInMinutes 时区差,单位是分钟
2.下面看下怎么使用
2.1首先有个初始值
TestRTC.defaultProps = {
date: new Date(),
};
2.2 初始化状态
this.state ={
date:this.props.date,
}
2.3 当用户滑动的时候会调用onDateChange 事件
onDateChange(date){
this.setState({date: date});
}
效果图如下:text会随着用户滑动到的日期而变化
核心代码如下:
class TestRTC extends Component {
constructor(props){
super (props);
this.state ={
date:this.props.date,
}
this.onDateChange = this.onDateChange.bind(this);
}
onDateChange(date){
this.setState({date: date});
}
render() {
return ({this.state.date.toLocaleDateString()});
}
}
TestRTC.defaultProps = {
date: new Date()
};
const styles = StyleSheet.create({
container: { flex: 1, backgroundColor: '#F5FCFF', },
text:{ flex:1, alignSelf:'center', },
image:{ height:80, width:50, marginRight:10, },
row:{ flexDirection:'row', flex:1, },
});
本文参考http://reactnative.cn/docs/0.35/datepickerios.html#content