当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 详解React Native开源时间日期选择器组件(react-native-datetime)

详解React Native开源时间日期选择器组件(react-native-datetime)

2017年12月12日  | 移动技术网IT编程  | 我要评论

项目介绍

该组件进行封装一个时间日期选择器,同时适配android、ios双平台，该组件基于@remobile/react-native-datetime-picker进行开发而来

配置安装

npm install react-native-datetime --save

1.1.ios环境配置

上面步骤完成之后，直接前台写js代码即可

1.2.android环境配置

在android/setting.gradle文件中如下配置

...
include ':react-native-datetime'
project(':react-native-datetime').projectdir = new file(rootproject.projectdir, '../node_modules/react-native-datetime/android')

在android/app/build.gradle文件中如下配置

...
dependencies {
  ...
  compile project(':react-native-datetime')
}

在mainactivity.java中进行注册模块

①.react native>=0.18开始

import com.keyee.datetime.*; // <--- import
 
public class mainactivity extends reactactivity {
 ......
 
 /**
  * a list of packages used by the app. if the app uses additional views
  * or modules besides the default ones, add more packages here.
  */
  @override
  protected list<reactpackage> getpackages() {
   return arrays.<reactpackage>aslist(
    new rctdatetimepickerpackage(this), // <------ add here
    new mainreactpackage());
  }
}

①.react native<=0.17版本

import com.keyee.datetime.*; // <--- import
 
public class mainactivity extends activity implements defaulthardwarebackbtnhandler {
 ......
 @override
 protected void oncreate(bundle savedinstancestate) {
  super.oncreate(savedinstancestate);
  mreactrootview = new reactrootview(this);
 
  mreactinstancemanager = reactinstancemanager.builder()
   .setapplication(getapplication())
   .setbundleassetname("index.android.bundle")
   .setjsmainmodulename("index.android")
   .addpackage(new mainreactpackage())
   .addpackage(new rctdatetimepickerpackage(this))       // <------ add here
   .setusedevelopersupport(buildconfig.debug)
   .setinitiallifecyclestate(lifecyclestate.resumed)
   .build();
 
  mreactrootview.startreactapplication(mreactinstancemanager, "examplern", null);
 
  setcontentview(mreactrootview);
 }
 
 ......
}

运行截图

ios运行效果

android运行效果

使用方法

<datetimepicker ref={(picker)=>{this.picker=picker}}/>
...
this.picker.showdatepicker(...)
this.picker.showtimepicker(...)
this.picker.showdatetimepicker(...)

在ios平台上面使用，需要确保当前datatimepicker视图在顶部

使用实例

'use strict';
 
var react = require('react-native');
var {
  stylesheet,
  touchableopacity,
  view,
  text,
} = react;
 
var datetimepicker = require('react-native-datetime');
var button = require('@remobile/react-native-simple-button');
 
module.exports = react.createclass({
  getinitialstate() {
    return {
      date: new date(),
    }
  },
  showdatepicker() {
    var date = this.state.date;
    this.picker.showdatepicker(date, (d)=>{
      this.setstate({date:d});
    });
  },
  showtimepicker() {
    var date = this.state.date;
    this.picker.showtimepicker(date, (d)=>{
      this.setstate({date:d});
    });
  },
  showdatetimepicker() {
    var date = this.state.date;
    this.picker.showdatetimepicker(date, (d)=>{
      this.setstate({date:d});
    });
  },
  render() {
    return (
      <view style={styles.container}>
        <text style={{textalign: 'center'}}>
          {this.state.date.tostring()}
        </text>
        <view style={{height:40}} />
        <button onpress={this.showdatepicker}>showdatepicker</button>
        <view style={{height:40}} />
        <button onpress={this.showtimepicker}>showtimepicker</button>
        <view style={{height:40}} />
        <button onpress={this.showdatetimepicker}>showdatetimepicker</button>
        <datetimepicker ref={(picker)=>{this.picker=picker}}/>
      </view>
    );
  },
});
 
var styles = stylesheet.create({
  container: {
    flex: 1,
    justifycontent: 'center',
    paddingtop:20,
  },
});

方法介绍

  • showdatepicker(date, callback(date))
  • showtimepicker(date, callback(date))
  • showdatetimepicker(date, callback(date))

属性介绍

  • canceltext (default: cancel)
  • oktext (default: ok)

开源项目地址:

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网