详解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中使用css需要注意的地方小结
Sep 01 Javascript
JS无限树状列表实现代码
Jan 11 Javascript
JS禁用浏览器退格键实现思路及代码
Oct 29 Javascript
详解Javascript模板引擎mustache.js
Jan 20 Javascript
Node.js返回JSONP详解
May 18 Javascript
JavaScript中对象的不同创建方法
Aug 12 Javascript
JSON 必知必会 观后记
Oct 27 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
Feb 19 Javascript
微信小程序中的swiper组件详解
Apr 14 Javascript
详解Vue webapp项目通过HBulider打包原生APP
Jun 29 Javascript
vue.js计算属性computed用法实例分析
Jul 06 Javascript
layui获取选中行数据的实例讲解
Aug 19 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
虹吸式咖啡壶操作
2021/03/03 冲泡冲煮
php 文件上传系统手记
2009/10/26 PHP
php中的四舍五入函数代码(floor函数、ceil函数、round与intval)
2014/07/14 PHP
php源码分析之DZX1.5字符串截断函数cutstr用法
2015/06/17 PHP
PHP网页安全认证的实例详解
2017/09/28 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
自写简单JS判断是否已经弹出页面
2010/10/20 Javascript
jQuery滚动加载图片效果的实现
2013/03/06 Javascript
JS localStorage实现本地缓存的方法
2013/06/22 Javascript
解决extjs grid 不随窗口大小自适应的改变问题
2014/01/26 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
2014/04/11 Javascript
jquery实现公告翻滚效果
2015/02/27 Javascript
JS中Location使用详解
2015/05/12 Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
2016/01/08 Javascript
jQuery实现返回顶部功能
2016/02/23 Javascript
jQuery实现简单滚动动画效果
2016/04/07 Javascript
JavaScript简单实现弹出拖拽窗口(二)
2016/06/17 Javascript
Node实战之不同环境下配置文件使用教程
2018/01/02 Javascript
浅谈Vue.js之初始化el以及数据的绑定说明
2019/11/14 Javascript
axios封装与传参示例详解
2020/10/18 Javascript
详解vue中在父组件点击按钮触发子组件的事件
2020/11/13 Javascript
[50:20]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第四局
2016/03/06 DOTA
python里使用正则表达式的组嵌套实例详解
2017/10/24 Python
python使用RNN实现文本分类
2018/05/24 Python
对python opencv 添加文字 cv2.putText 的各参数介绍
2018/12/05 Python
python实现年会抽奖程序
2019/01/22 Python
土耳其家居建材网站:Koçtaş
2016/11/22 全球购物
英国Flybe航空官网:欧洲最大的独立支线廉价航空公司
2019/07/15 全球购物
《小松树和大松树》教学反思
2014/02/20 职场文书
高中学生干部学习的自我评价
2014/02/21 职场文书
关于中国梦的演讲稿
2014/04/23 职场文书
我有一个梦想演讲稿
2014/05/05 职场文书
企业宣传工作方案
2014/06/02 职场文书
php 解析非标准json、非规范json
2021/04/01 PHP
基于Redis过期事件实现订单超时取消
2021/05/08 Redis
详解php中流行的rpc框架
2021/05/29 PHP