首页 > 移动平台 > 详细

React native 的DatePickerIOS组件

时间:2016-08-16 10:29:26      阅读:205      评论: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
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!