详解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 相关文章推荐
Ajax异步提交表单数据的说明及方法实例
Jun 22 Javascript
当鼠标滑过文本框自动选中输入框内容的JS代码分享
Nov 26 Javascript
JQuery右键菜单插件ContextMenu使用指南
Dec 19 Javascript
Vue.js创建Calendar日历效果
Nov 03 Javascript
ionic2 tabs使用 Modal底部tab弹出框
Dec 30 Javascript
浅谈webpack SplitChunksPlugin实用指南
Sep 17 Javascript
实例讲解JavaScript预编译流程
Jan 24 Javascript
JavaScript之解构赋值的理解
Jan 30 Javascript
layui动态绑定事件的方法
Sep 20 Javascript
js实现九宫格抽奖
Mar 19 Javascript
如何解决jQuery 和其他JS库的冲突
Jun 22 jQuery
Vue+Element自定义纵向表格表头教程
Oct 26 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 array_slice函数的使用以及参数详解
2008/08/30 PHP
跟我学Laravel之快速入门
2014/10/15 PHP
JavaScript 组件之旅(一)分析和设计
2009/10/28 Javascript
MooBox 基于Mootools的对话框插件
2012/01/20 Javascript
七个很有意思的PHP函数
2014/05/12 Javascript
js实现网页标题栏闪烁提示效果实例分析
2014/11/20 Javascript
node.js中的fs.mkdir方法使用说明
2014/12/17 Javascript
jQuery中queue()方法用法实例
2014/12/29 Javascript
jQuery实现复选框成对选择及对应取消的方法
2015/03/03 Javascript
JavaScript每天定时更换皮肤样式的方法
2015/07/01 Javascript
可以浮动某个物体的jquery控件用法实例
2015/07/24 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
2020/04/20 Javascript
第一次接触Bootstrap框架
2016/10/24 Javascript
微信小程序之拖拽排序(代码分享)
2017/01/21 Javascript
HTML5+jQuery实现搜索智能匹配功能
2017/03/24 jQuery
Bootstrap布局之栅格系统学习笔记
2017/05/04 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
2017/05/30 Javascript
JS库之wow.js使用方法
2017/09/14 Javascript
VUE2实现事件驱动弹窗示例
2017/10/21 Javascript
vue2.0s中eventBus实现兄弟组件通信的示例代码
2017/10/25 Javascript
layUI实现列表查询功能
2019/07/27 Javascript
JS正则表达式验证端口范围(0-65535)
2020/01/06 Javascript
vue-cli3配置favicon.ico和title的流程
2020/10/27 Javascript
详解vue-router的导航钩子(导航守卫)
2020/11/02 Javascript
[02:16]深扒TI7聊天轮盘语音出处2
2017/05/11 DOTA
pygame学习笔记(5):游戏精灵
2015/04/15 Python
python爬虫超时的处理的实例
2018/12/19 Python
Python谱减法语音降噪实例
2019/12/18 Python
PySide2出现“ImportError: DLL load failed: 找不到指定的模块”的问题及解决方法
2020/06/10 Python
英国排名第一的停车场运营商:NCP
2019/08/26 全球购物
马歇尔耳机官网:Marshall Headphones
2020/02/04 全球购物
施惠特软件测试面试题以及笔试题
2015/05/13 面试题
电子商务求职信
2014/06/15 职场文书
门卫岗位职责说明书
2014/08/18 职场文书
vue3中provide && inject的使用
2021/07/01 Vue.js
angular4实现带搜索的下拉框
2022/03/25 Javascript