怎么使用 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 用戶修改日期或時(shí)間時(shí)調(diào)用此回調(diào)函數(shù)
timeZoneOffsetInMinutes 時(shí)區(qū)差，單位是分鐘
2.下面看下怎么使用
2.1首先有個(gè)初始值
TestRTC.defaultProps = {
date: new Date(),
};
2.2 初始化狀態(tài)
this.state ={
date:this.props.date齿椅，
}
2.3 當(dāng)用戶滑動(dòng)的時(shí)候會(huì)調(diào)用onDateChange 事件
onDateChange(date){
this.setState({date: date});
}
效果圖如下：text會(huì)隨著用戶滑動(dòng)到的日期而變化
核心代碼如下：
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
