详解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 相关文章推荐
srcElement表格样式
Sep 03 Javascript
25个好玩的JavaScript小游戏分享
Apr 22 Javascript
js实现网站最上边可关闭的浮动广告条代码
Sep 04 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
Apr 29 Javascript
总结几道关于Node.js的面试问题
Jan 11 Javascript
Bootstrap导航条学习使用(一)
Feb 08 Javascript
简单介绍react redux的中间件的使用
Apr 06 Javascript
Vue.js 十五分钟入门图文教程
Sep 12 Javascript
详解Vuex下Store的模块化拆分实践
Jul 31 Javascript
使用vue-cli4.0快速搭建一个项目的方法步骤
Dec 04 Javascript
JS实现拼图游戏
Jan 29 Javascript
详解vue中在父组件点击按钮触发子组件的事件
Nov 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
使用PHPMyAdmin修复论坛数据库的图文方法
2012/01/09 PHP
php导入模块文件分享
2015/03/17 PHP
WampServer搭建php环境时遇到的问题汇总
2015/07/23 PHP
各种效果的jquery ui(接口)介绍
2008/09/17 Javascript
javascript 字符 Escape,encodeURI,encodeURIComponent
2009/07/09 Javascript
json属性名为什么要双引号(个人猜测)
2014/07/31 Javascript
js 判断图片是否加载完以及实现图片的预下载
2014/08/14 Javascript
jQuery焦点图切换简易插件制作过程全纪录
2014/08/27 Javascript
详解JS函数重载
2014/12/04 Javascript
js实现鼠标感应向下滑动隐藏菜单的方法
2015/02/20 Javascript
JavaScript省市区三级联动菜单效果
2016/09/21 Javascript
jQuery实现的简单拖动层示例
2017/02/22 Javascript
JS图片轮播与索引变色功能实例详解
2017/07/06 Javascript
backbone简介_动力节点Java学院整理
2017/07/14 Javascript
小程序实现选择题选择效果
2018/11/04 Javascript
vue与原生app的对接交互的方法(混合开发)
2018/11/28 Javascript
vue项目中定义全局变量、函数的几种方法
2019/11/08 Javascript
javascript实现超好看的3D烟花特效
2020/01/01 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
2020/05/09 Javascript
[03:03]2014DOTA2西雅图国际邀请赛 Alliance战队巡礼
2014/07/07 DOTA
在Python的web框架中配置app的教程
2015/04/30 Python
Python中defaultdict与lambda表达式用法实例小结
2018/04/09 Python
基于Python列表解析(列表推导式)
2018/06/23 Python
python 将对象设置为可迭代的两种实现方法
2019/01/21 Python
对pyqt5中QTabWidget的相关操作详解
2019/06/21 Python
python实现从本地摄像头和网络摄像头截取图片功能
2019/07/11 Python
python3字符串操作总结
2019/07/24 Python
python3中eval函数用法使用简介
2019/08/02 Python
Python通过4种方式实现进程数据通信
2020/03/12 Python
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
2014/05/03 HTML / CSS
乌克兰数字设备、配件和智能技术的连锁商店:KTC
2020/08/18 全球购物
在线实验室测试:HealthLabs.com
2020/05/03 全球购物
幼儿园教师节活动方案
2014/02/02 职场文书
文明礼仪伴我行演讲稿
2014/05/12 职场文书
给学校建议书范文
2014/05/13 职场文书
离婚纠纷代理词
2015/05/23 职场文书