ReactNative Component  之 DatePickerIOS

怎么使用 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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • TextInput是一个允许用户在应用中通过键盘输入文本的基本组件。本组件的属性提供了多种特性的配置,譬如自动完成...
    亭止阅读 3,300评论 1 0
  • 前言 本文有配套视频,可以酌情观看。 文中内容因各人理解不同,可能会有所偏差,欢迎朋友们联系我。 文中所有内容仅供...
    珍此良辰阅读 1,544评论 13 7
  • 前言 本文有配套视频,可以酌情观看。 文中内容因各人理解不同,可能会有所偏差,欢迎朋友们联系我。 文中所有内容仅供...
    珍此良辰阅读 1,170评论 0 6
  • 一. 简介 一个核心组件,用于高效地显示一个可以垂直滚动的变化的数据列表。最基本的使用方式就是创建一个ListVi...
    飞奔的小马阅读 1,362评论 0 2
  • 开发环境配置 参照这里 页面渲染 组件的渲染需要在自定义 class 中进行,每个自定义视图class中都包含一个...
    cocoawork丶阅读 352评论 0 0