码迷,mamicode.com
首页 > 移动开发 > 详细

React native 的DatePickerIOS组件

时间:2016-08-16 10:32:04      阅读:1361      评论:0      收藏:0      [点我收藏+]

标签:

 1.首先如代码所示  引入DatePickerIOS组件 设置他的时间是当前时间

export default class AlertDemo extends Component {
  render() {
    return (
      <View style={styles.container}>

          <DatePickerIOS date={new Date()} mode="time"/>

      </View>
    );
  }
}

  技术分享

其中mode属性代表的是他的展示模式总共有‘date‘, ‘time‘, ‘datetime;这三种模式

但是这种状态选择后由会回到当前时间 所以应该设置是state属性 如下 

export default class AlertDemo extends Component {
  static defaultprops ={
    date:new Date()    //初始化静态当前时间
  }
  constructor(props){
    super(props);
    this.state={         //动态state
    date:this.props.date
    }
  }
  render() {
    return (
      <View style={styles.container}>
        <DatePickerIOS
             date={this.state.date}
              onDateChange={(date)=>this.setState({date})} //当内容改变的时候出发此函数
             mode=‘time‘/>
       </View>
    );
  }
}

  这样设置则可以解决改变时间后不会出现又自动跑到当前时间的情况

React native 的DatePickerIOS组件

标签:

原文地址:http://www.cnblogs.com/allenxieyusheng/p/5775299.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!