react native中有关日期的组件DatePicker 示例

标签：icons   日期   time   install   mode   组件   date   react   图标   

1.用node加载react-native-datepicker包

npm install react-native-datepicker

2.直接上代码

import React, { PureComponent } from ‘react‘;
import DatePicker from ‘react-native-datepicker‘;

class MyDatePicker extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
　　　　data:new Date()  //默认显示当前时间，如果为自定义则为（‘1991-1-1‘）
    };
  }
  render() {
    return (
      <DatePicker
        style={{ width: 50, justifyContent: ‘center‘, alignItems: ‘center‘ }}
        date={this.state.data}
        mode="date"
        confirmBtnText="Confirm"
        cancelBtnText="Cancel"
        iconSource={require(‘./../image/calendar.png‘)}  //自定义图标
        customStyles={{
        }}
        hideText={true}  //不显示日期文本
        onDateChange={(datetime) => { this.props.storq.datetimeFun(datetime); }}
      />
    );
  }
}

export default MyDatePicker;

3.在另一个文件中引用

react native中有关日期的组件DatePicker 示例

标签：icons   日期   time   install   mode   组件   date   react   图标   

原文地址：http://www.cnblogs.com/zhuyupingit/p/7602915.html