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


Posted in Javascript onSeptember 13, 2017

项目介绍

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

开源项目地址:https://github.com/cnjon/react-native-datetime

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

Javascript 相关文章推荐
javascript 关闭IE6、IE7
Jun 01 Javascript
JS之Date对象和获取系统当前时间详解
Jan 13 Javascript
通过正则表达式实现表单验证是否为中文
Feb 18 Javascript
JavaScript使用Prototype实现面向对象的方法
Apr 14 Javascript
JavaScript 正则表达式中global模式的特性
Feb 25 Javascript
JS前端笔试题分析
Dec 19 Javascript
Node.js 中exports 和 module.exports 的区别
Mar 14 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
Oct 26 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
Sep 26 Javascript
Webpack 4如何动态切割JS注入文件名详解
Jul 09 Javascript
js get和post请求实现代码解析
Feb 06 Javascript
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
Apr 30 Vue.js
基于vue的短信验证码倒计时demo
Sep 13 #Javascript
BootStrap数据表格实例代码
Sep 13 #Javascript
使用Fullpage插件快速开发整屏翻页的页面
Sep 13 #Javascript
Angular CLI 安装和使用教程
Sep 13 #Javascript
JS库之Three.js 简易入门教程(详解之一)
Sep 13 #Javascript
详解VueRouter进阶之导航钩子和路由元信息
Sep 13 #Javascript
JS库中的Particles.js在vue上的运用案例分析
Sep 13 #Javascript
You might like
php curl选项列表(超详细)
2013/07/01 PHP
php实现字符串翻转的方法
2015/03/27 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
javascript 窗口加载蒙板 内嵌网页内容
2010/11/19 Javascript
jQuery获取样式中的背景颜色属性值/颜色值
2012/12/17 Javascript
在图片上显示左右箭头类似翻页的代码
2013/03/04 Javascript
一个html5播放视频的video控件只支持android的默认格式mp4和3gp
2014/05/08 Javascript
JavaScript中的函数的两种定义方式和函数变量赋值
2014/05/12 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
2015/06/19 Javascript
深入理解jQuery3.0的domManip函数
2016/09/01 Javascript
JavaScript数据结构之广义表的定义与表示方法详解
2017/04/12 Javascript
input框中自动展示当前日期yyyy/mm/dd的实现方法
2017/07/06 Javascript
vue+element实现批量删除功能的示例
2018/02/28 Javascript
JavaScript错误处理操作实例详解
2019/01/04 Javascript
vue+moment实现倒计时效果
2019/08/26 Javascript
Node.js API详解之 vm模块用法实例分析
2020/05/27 Javascript
vue实现div单选多选功能
2020/07/16 Javascript
Python读取网页内容的方法
2015/07/30 Python
python代码过长的换行方法
2018/07/19 Python
Python中反射和描述器总结
2018/09/23 Python
django开发post接口简单案例,获取参数值的方法
2018/12/11 Python
python的turtle库使用详解
2019/05/10 Python
python实现ftp文件传输功能
2020/03/20 Python
Python接口测试文件上传实例解析
2020/05/22 Python
python中pow函数用法及功能说明
2020/12/04 Python
历史系自荐信范文
2013/12/24 职场文书
大学生自我鉴定范文
2013/12/28 职场文书
《冬阳童年骆驼队》教学反思
2014/04/15 职场文书
2014年村官工作总结
2014/11/24 职场文书
置业顾问岗位职责
2015/02/09 职场文书
酒店仓管员岗位职责
2015/04/01 职场文书
2015年煤矿安全工作总结
2015/05/23 职场文书
绿里奇迹观后感
2015/06/15 职场文书
2016年记者节感言
2015/12/08 职场文书
Vue项目打包、合并及压缩优化网页响应速度
2021/07/07 Vue.js
vue的项目如何打包上线
2022/04/13 Vue.js