详解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 相关文章推荐
js实现字符串转日期格式的方法
May 20 Javascript
详解JavaScript的while循环的使用
Jun 03 Javascript
jquery中实现时间戳与日期相互转换
Apr 12 Javascript
Bootstrap轮播插件简单使用方法介绍
Jun 21 Javascript
jQuery图片加载显示loading效果
Nov 04 Javascript
js实现彩色条纹滚动条效果
Mar 15 Javascript
JavaScript文件的同步和异步加载的实现代码
Aug 19 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
Aug 10 Javascript
js使用formData实现批量上传
Mar 27 Javascript
JS监听滚动和id自动定位滚动
Dec 18 Javascript
vue.js实现的幻灯片功能示例
Jan 18 Javascript
JavaScript oncopy事件用法实例解析
May 13 Javascript
基于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:风雨欲来 路在何方?
2006/10/09 PHP
php 批量添加多行文本框textarea一行一个
2014/06/03 PHP
php的XML文件解释类应用实例
2014/09/22 PHP
php中mail函数发送邮件失败的解决方法
2014/12/24 PHP
PHP使用内置dir类实现目录遍历删除
2015/03/31 PHP
php 输出json及显示json中的中文汉字详解及实例
2016/11/09 PHP
ThinkPHP3.2框架操作Redis的方法分析
2019/05/05 PHP
Laravel统一错误处理为JSON的方法介绍
2020/10/18 PHP
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
2007/03/12 Javascript
JavaScript 学习笔记(十四) 正则表达式
2010/01/22 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
2015/01/23 Javascript
学习JavaScript设计模式(链式调用)
2015/11/26 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
2015/12/04 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
2016/03/28 Javascript
node.js中 stream使用教程
2016/08/28 Javascript
原生JS下拉加载插件分享
2016/12/26 Javascript
JavaScript的继承实现小结
2017/05/07 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
2017/10/23 Javascript
微信小程序实现传参数的几种方法示例
2018/01/10 Javascript
Echarts动态加载多条折线图的实现代码
2019/05/24 Javascript
nodejs 递归拷贝、读取目录下所有文件和目录
2019/07/18 NodeJs
JS用最简单的方法实现四舍五入
2019/08/27 Javascript
[02:47]DOTA2亚洲邀请赛 HR战队出场宣传片
2015/02/07 DOTA
python使用fileinput模块实现逐行读取文件的方法
2015/04/29 Python
Python中 传递值 和 传递引用 的区别解析
2018/02/22 Python
python里dict变成list实例方法
2019/06/26 Python
Python qqbot 实现qq机器人的示例代码
2019/07/11 Python
Python 实现将大图切片成小图,将小图组合成大图的例子
2020/03/14 Python
如何查看在weblogic中已经发布的EJB
2012/06/01 面试题
董事长岗位职责
2013/11/30 职场文书
《数星星的孩子》教学反思
2014/04/11 职场文书
文员试用期转正自我鉴定
2014/09/14 职场文书
让世界充满爱观后感
2015/06/10 职场文书
小学运动会入场词
2015/07/18 职场文书
大学军训口号大全
2015/12/24 职场文书
2019银行员工个人工作自我鉴定
2019/06/27 职场文书