本教程的实现效果如下:

为了实现其淡入/淡出的覆盖效果, 还有取消按钮, 在此用了一个三方的组件, 大家可以先安装一下:

三方组件的地址:https://github.com/eyaleizenberg/react-native-custom-action-sheet (可以看看,也可以直接按我的步骤走)

1. 在terminal的该工程目录下运行: npm install react-native-custom-action-sheet --save

2. 然后运行: npm start

3. 具体实现代码如下:

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableHighlight,
DatePickerIOS
} from 'react-native'; //这是一个三方组件 github地址:https://github.com/eyaleizenberg/react-native-custom-action-sheet
var CustomActionSheet = require('react-native-custom-action-sheet'); class Demo extends Component { state = {
datePickerModalVisible: false, //选择器显隐标记
chooseDate: new Date() //选择的日期
}; _showDatePicker () { //切换显隐标记
this.setState({datePickerModalVisible: !this.state.datePickerModalVisible});
}; _onDateChange (date) { //改变日期state
alert(date); //弹出提示框: 显示你选择日期
this.setState({
chooseDate: date
});
}; render() { let datePickerModal = ( //日期选择器组件 (根据标记赋值为 选择器 或 空)
this.state.datePickerModalVisible ?
<CustomActionSheet
modalVisible={this.state.datePickerModalVisible} //显隐标记
onCancel={()=>this._showDatePicker()}> //点击取消按钮 触发事件
<View style={styles.datePickerContainer}>
<DatePickerIOS
mode={"datetime"} //选择器模式: 'date'(日期), 'time'(时间), 'datetime'(日期和时间)
minimumDate={new Date()} //最小时间 (这里设置的是当前的时间)
minuteInterval={30} //最小时间间隔 (这里设置的是30分钟)
date={this.state.chooseDate} //默认的时间
onDateChange={this._onDateChange.bind(this)} //日期被修改时回调此函数
/>
</View>
</CustomActionSheet> : null
); return (
<View style={styles.container}>
<TouchableHighlight
style={{backgroundColor:'cyan', padding:5}}
onPress={()=>this._showDatePicker()} //按钮: 点击触发方法
underlayColor='gray'
>
<Text >show DatePick</Text>
</TouchableHighlight>
{datePickerModal} //日期选择组件
</View>
);
}
} const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
datePickerContainer: {
flex: 1,
borderRadius: 5,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'white',
marginBottom: 10,
},
}); AppRegistry.registerComponent('Demo', () => Demo);

写好了,在terminal中运行:react-native run-ios 就能看到效果了

react-native DatePicker日期选择组件的实现的更多相关文章

  1. antd-mobile的DatePicker日期选择组件使用

    现在项目上有个需求,在时间选择上需要精确到分钟,且分钟只能是0分钟或者是30分钟. 使用了antd-mobile的DatePicker组件,具体用法可参考:https://mobile.ant.des ...

  2. 支付宝小程序日期选择组件datePicker封装

    github 地址 https://github.com/iocool/antminDatePicker 最近在做支付宝小程序(以下简称小程序)开发,发现小程序的日期选择组件很不好用,比如安卓和IOS ...

  3. 日期选择组件(DatePicker)的实现

    一.效果图 日期选择组件大概长这样: 从效果图可以看出,日期选择组件由两部分组成:日历表格和顶部操作栏. 二.日历表格 日期选择组件的核心主体是日历表格: 可以将日历表格表示成一个7️*的二维数组,数 ...

  4. React Native 项目常用第三方组件汇总

    React Native 项目常用第三方组件汇总 https://www.jianshu.com/p/d9cd9a868764?utm_campaign=maleskine&utm_conte ...

  5. React Native知识5-Touchable类组件

    React Native 没有像web那样可以给元素绑定click事件,前面我们已经知道Text组件有onPress事件,为了给其他组件 也绑定点击事件,React Native提供了3个组件来做这件 ...

  6. sencha:日期选择组件datepicker

    来源于<sencha touch权威指南> ------------------------------- 除app.js外,其它内容都与上一篇博客里的内容相同.app.js代码如下: E ...

  7. Ant Design 日期选择组件RangePicker 选择时间范围后计算范围内的天数。

    /** *需求:同年同月,同年不同月(两个月相减大于1,小于1),不同年(两个年相减大于1(是否为闰年),小于1),起止包含的月份及天 */ //首先引入组件 import { DatePicker} ...

  8. My97DatePicker -- 一个功能丰富, 而且兼容 ie 6, 7的日期选择组件

    easyUI 也提供了 功能强大的日期组件, 可惜在ie 6,7,8下会报错,没有找到 addEventListener , JSON,  可能现在不想再支持低版本ie了 另外avalon也提供了 日 ...

  9. React Native 之 定义的组件 (跨文件使用)

    哈哈的~~~今天介绍的是自定义组件 然后去使用这个组件,让这个组件传递这各种文件之间  哈哈  下面开始吧!!!! 我们所要创建的是一个自定义的Button,先创建一个js文件起名为MyButton, ...

随机推荐

  1. C++的性能C#的产能?! - .Net Native 系列《三》:.NET Native部署测试方案及样例

    之前一文<c++的性能, c#的产能?!鱼和熊掌可以兼得,.NET NATIVE初窥> 获得很多朋友支持和鼓励,也更让我坚定做这项技术的推广者,希望能让更多的朋友了解这项技术,于是先从官方 ...

  2. Hadoop2.2.0安装过程记录

    1    安装环境1.1    客户端1.2    服务端1.3    安装准备    2    操作系统安装2.1.1    BIOS打开虚拟化支持2.1.2    关闭防火墙2.1.3    安装 ...

  3. javascript的垃圾收集机制

    × 目录 [1]原理 [2]标记清除 [3]引用计数[4]性能问题[5]内存管理 前面的话 javascript具有自动垃圾收集机制,执行环境会负责管理代码执行过程中使用的内存.在编写javascri ...

  4. 设计模式(八): 从“小弟”中来类比"外观模式"(Facade Pattern)

    在此先容我拿“小弟”这个词来扯一下淡.什么是小弟呢,所谓小弟就是可以帮你做一些琐碎的事情,在此我们就拿“小弟”来类比“外观模式”.在上面一篇博文我们完整的介绍了“适配器模式”,接下来我们将要在这篇博客 ...

  5. HTTP Method详细解读(`GET` `HEAD` `POST` `OPTIONS` `PUT` `DELETE` `TRACE` `CONNECT`)

    前言 HTTP Method的历史: HTTP 0.9 这个版本只有GET方法 HTTP 1.0 这个版本有GET HEAD POST这三个方法 HTTP 1.1 这个版本是当前版本,包含GET HE ...

  6. 深入理解java中的ArrayList和LinkedList

    杂谈最基本数据结构--"线性表": 表结构是一种最基本的数据结构,最常见的实现是数组,几乎在每个程序每一种开发语言中都提供了数组这个顺序存储的线性表结构实现. 什么是线性表? 由0 ...

  7. 分布式系统理论进阶 - Paxos

    引言 <分布式系统理论基础 - 一致性.2PC和3PC>一文介绍了一致性.达成一致性需要面临的各种问题以及2PC.3PC模型,Paxos协议在节点宕机恢复.消息无序或丢失.网络分化的场景下 ...

  8. php后台编辑关联数据

    数据库中两张表: info表中"民族"关联了nation表中的"code". php通过后台编辑info表中民族显示成用户可看懂及可直接修改的选项. 新建xin ...

  9. js的OOP继承实现

    以下视频截图均来自慕课网javascript深入浅出: 这里Student.prototype之所以使用create方法来创建,而不是直接赋Person.prototype的值,是因为如果使用赋值的话 ...

  10. 《Head First 设计模式》之策略模式

    作者:Grey 原文地址:http://www.cnblogs.com/greyzeng/p/5915202.html 模式名称 策略模式(Strategy Pattern) 需求 模拟鸭子游戏,游戏 ...