欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-09-08 11:26:18
项目介绍 该组件进行封装一个时间日期选择器,同时适配android、ios双平台,该组件基于@remobile/react-native-datetime-picke...

项目介绍

该组件进行封装一个时间日期选择器,同时适配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运行效果

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

android运行效果

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

使用方法

<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)

开源项目地址:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。