详解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实现八大排序
Apr 27 Javascript
JQuery 的跨域方法推荐_可跨任何网站
May 18 Javascript
jquery的ajax提交form表单的两种方法小结(推荐)
May 25 Javascript
微信小程序中页面FOR循环和嵌套循环
Jun 21 Javascript
说说AngularJS中的$parse和$eval的用法
Sep 14 Javascript
微信小程序实现之手势锁功能实例代码
Jul 19 Javascript
深入理解JS中Number(),parseInt(),parseFloat()三者比较
Aug 24 Javascript
react实现同页面三级跳转路由布局
Sep 26 Javascript
Vue 设置axios请求格式为form-data的操作步骤
Oct 29 Javascript
解决vue项目 build之后资源文件找不到的问题
Sep 12 Javascript
js实现简单的随机点名器
Sep 17 Javascript
JavaScript选择器函数querySelector和querySelectorAll
Nov 27 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 获取客户端真实IP地址多种方法小结
2010/05/15 PHP
用PHP实现小写金额转换大写金额的代码(精确到分)
2012/01/10 PHP
php使用memcoder将视频转成mp4格式的方法
2015/03/12 PHP
PHP中PDO的事务处理分析
2016/04/07 PHP
TP5框架简单登录功能实现方法示例
2019/10/31 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
几个高效,简洁的字符处理函数
2007/04/12 Javascript
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
2010/03/15 Javascript
cookie的复制与使用记住用户名实现代码
2013/11/04 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
2014/07/08 Javascript
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
2014/10/17 Javascript
jQuery实现textarea自动增长宽高的方法
2015/12/18 Javascript
jQuery解析json格式数据简单实例
2016/01/22 Javascript
JQuery解析XML的方法小结
2016/04/02 Javascript
js实现仿购物车加减效果
2017/03/01 Javascript
微信小程序五星评分效果实现代码
2017/04/06 Javascript
元素全屏的设置与监听实例
2017/11/28 Javascript
node结合swig渲染摸板的方法
2018/04/11 Javascript
js实现轮播图效果 z-index实现轮播图
2020/01/17 Javascript
nodeJS与MySQL实现分页数据以及倒序数据
2020/06/05 NodeJs
vue项目接口域名动态获取操作
2020/08/13 Javascript
使用Python程序抓取新浪在国内的所有IP的教程
2015/05/04 Python
理解Python中的With语句
2016/03/18 Python
Python数据类型详解(四)字典:dict
2016/05/12 Python
使用apidocJs快速生成在线文档的实例讲解
2018/02/07 Python
Python 循环语句之 while,for语句详解
2018/04/23 Python
Python调用jar包方法实现过程解析
2020/08/11 Python
python中pivot()函数基础知识点
2021/01/03 Python
Lenox官网:精美的瓷器&独特的礼品
2017/02/12 全球购物
白酒市场营销方案
2014/02/25 职场文书
小学英语复习计划
2015/01/19 职场文书
生死牛玉儒观后感
2015/06/11 职场文书
同意落户证明
2015/06/19 职场文书
2015小学师德工作总结
2015/07/21 职场文书
图文详解matlab原始处理图像几何变换
2021/07/09 Python
python实现商品进销存管理系统
2022/05/30 Python