详解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判断当前日期是否大于某个日期的实现代码
Sep 02 Javascript
Jquery通过Ajax访问XML数据的小例子
Nov 18 Javascript
JS中常用的输出方式(五种)
Jun 12 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
Aug 15 Javascript
基于JS实现回到页面顶部的五种写法(从实现到增强)
Sep 03 Javascript
js实现图片切换(动画版)
Dec 25 Javascript
javascript中apply/call和bind的使用
Feb 15 Javascript
利用ECharts.js画K线图的方法示例
Jan 10 Javascript
Node Puppeteer图像识别实现百度指数爬虫的示例
Feb 22 Javascript
详解各版本React路由的跳转的方法
May 10 Javascript
详解vuejs中执行npm run dev出现页面cannot GET/问题
Apr 26 Javascript
Vue数组响应式操作及高阶函数使用代码详解
Aug 01 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
thinkphp区间查询、统计查询与SQL直接查询实例分析
2014/11/24 PHP
如何使用PHP Embed SAPI实现Opcodes查看器
2015/11/10 PHP
PHP单例模式详解及实例代码
2016/12/21 PHP
javascript instanceof,typeof的区别
2010/03/24 Javascript
jquery验证表单中的单选与多选实例
2013/08/18 Javascript
window.onload和$(function(){})的区别介绍
2013/10/30 Javascript
jQuery中多个元素的Hover事件解决方案
2014/06/12 Javascript
connect中间件session、cookie的使用方法分享
2014/06/17 Javascript
JavaScript基础知识学习笔记
2014/12/02 Javascript
nodejs实现遍历文件夹并统计文件大小
2015/05/28 NodeJs
深入探究JavaScript中for循环的效率问题及相关优化
2016/03/13 Javascript
js表单验证实例讲解
2016/03/31 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
2016/12/06 Javascript
jquery validation验证表单插件
2017/01/07 Javascript
js仿微信抢红包功能
2020/09/25 Javascript
如何开发出更好的JavaScript模块
2017/12/22 Javascript
微信小程序实现时间预约功能
2018/11/27 Javascript
Node.js + express基本用法教程
2019/03/14 Javascript
python递归查询菜单并转换成json实例
2017/03/27 Python
python实现unicode转中文及转换默认编码的方法
2017/04/29 Python
Python有序查找算法之二分法实例分析
2017/12/11 Python
python自动化工具之pywinauto实例详解
2019/08/26 Python
pygame编写音乐播放器的实现代码示例
2019/11/19 Python
python dataframe NaN处理方式
2019/12/26 Python
HTML5使用drawImage()方法绘制图像
2014/06/23 HTML / CSS
Lulu & Georgia官方网站:购买地毯、家具、抱枕、壁纸、床上用品等
2018/03/19 全球购物
什么是重载?CTS、CLS和CLR分别做何解释
2012/05/06 面试题
微笑面对生活演讲稿
2014/05/13 职场文书
个人担保书范文
2014/05/20 职场文书
小学生植树节活动总结
2014/07/04 职场文书
2014年中学生检讨书大全
2014/10/09 职场文书
志愿者服务宣传标语口号
2015/12/26 职场文书
2019学校运动会开幕词
2019/05/13 职场文书
pandas:get_dummies()与pd.factorize()的用法及区别说明
2021/05/21 Python
淡雅古典唯美少女娇媚宁静迷人写真
2022/03/21 杂记
解决IIS7下无法绑定https主机的问题
2022/04/29 Servers