【React Native开发】React Native控件之DatePickerAndroid时间日期选择器组件讲解(34)
来自： http://www.lcode.org/react-native控件之datepickerandroid时间日期选择器组件讲/
尊重版权,转载请注明出处
本文来自:江清清的技术专栏(http://www.lcode.org)
(一)前言
今天我们继续来看一下DatePickerAndroid时间日期选择器组件的讲解以及使用实例。
刚创建的React Native技术交流2群( 496601483 ),欢迎各位大牛,React Native技术爱好者加入交流!同时博客右侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!
该DatePickerAndroid控件会进行加载打开一个标准的Android时间日期选择器弹框，注意该控件只适合Android平台。可以看一下官方的实例代码:
try { const {action, year, month, day} = await DatePickerAndroid.open({ // 对于当前的时间可以使用 `new Date()` // May 25 2020. Month 0 is January. 使用具体的时间创建一个Data对象 date: new Date(2020, 4, 25) }); if (action !== DatePickerAndroid.dismissedAction) { // Selected year, month (0-11), day } } catch ({code, message}) { console.warn('Cannot open date picker', message); } (二)方法
1.Promise<Object> open(options:Object) staitc,静态方法，使用该方法进行加载弹出一个标准的Android时间日期选择器。该options(可选)参数有以下三种对象：
①:'date' 日期Date对象或者时间戳以毫秒单位-日期已默认格式显示
②:'minDate' 日期Date对象或者时间戳以毫秒单位-可以选择的最小时间
③:'maxDate' 日期Date对象或者时间戳以毫秒单位-可以选择的最大时间
该方法返回一个Promise对象，如果用户选择了日期，该被一个包含'action'，'year','month(0-11)','day'的对象调用。如果用户关闭了选择器，那么该Promise对象将会使用'DatePickerAndroid.dismissedAction'调用。
[注意]:原生的时间日期选择器当我们在使用'minDate'和'maxDate'参数的时候，可能在Android 4.0或者更低版本中出现界面不同的情况。
2.dateSetAction() ,static静态方法，选择时间日期选择器
3.dismissedAction(),static静态方法，关闭时间日期选择器
(三)使用实例
上面我们已经对时间日期选择的基本介绍和方法做了相关介绍，下面使用一个实战实例来对于DatePickerAndroid组件进行详细演示，具体实例代码如下:
/** * Sample React Native App * https://github.com/非死book/react-native */ 'use strict'; import React, { AppRegistry, Component, StyleSheet, Text, View, DatePickerAndroid, TouchableHighlight, } from 'react-native'; //简单封装一个组件 class CustomButton extends React.Component { render() { return ( <TouchableHighlight style={styles.button} underlayColor="#a5a5a5" onPress={this.props.onPress}> <Text style={styles.buttonText}>{this.props.text}</Text> </TouchableHighlight> ); } } class DataPickerDemo extends Component { constructor(props){ super(props); this.state={ presetDate: new Date(2016, 3, 5), allDate: new Date(2020, 4, 5), simpleText: '选择日期,默认今天', minText: '选择日期,不能比今日再早', maxText: '选择日期,不能比今日再晚', presetText: '选择日期,指定2016/3/5', }; } //进行创建时间日期选择器 async showPicker(stateKey, options) { try { var newState = {}; const {action, year, month, day} = await DatePickerAndroid.open(options); if (action === DatePickerAndroid.dismissedAction) { newState[stateKey + 'Text'] = 'dismissed'; } else { var date = new Date(year, month, day); newState[stateKey + 'Text'] = date.toLocaleDateString(); newState[stateKey + 'Date'] = date; } this.setState(newState); } catch ({code, message}) { console.warn(`Error in example '${stateKey}': `, message); } } render() { return ( <View> <Text style={styles.welcome}> 日期选择器组件实例 </Text> <TouchableHighlight style={styles.button} underlayColor="#a5a5a5" onPress={this.showPicker.bind(this, 'simple', {date: this.state.simpleDate})}> <Text style={styles.buttonText}>点击弹出基本日期选择器</Text> </TouchableHighlight> <CustomButton text={this.state.presetText} onPress={this.showPicker.bind(this, 'preset', {date: this.state.presetDate})}/> <CustomButton text={this.state.minText} onPress={this.showPicker.bind(this, 'min', {date: this.state.minDate,minDate:new Date()})}/> <CustomButton text={this.state.maxText} onPress={this.showPicker.bind(this, 'max', {date: this.state.maxDate,maxDate:new Date()})}/> </View> ); } } const styles = StyleSheet.create({ welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, button: { margin:5, backgroundColor: 'white', padding: 15, borderBottomWidth: StyleSheet.hairlineWidth, borderBottomColor: '#cdcdcd', } }); AppRegistry.registerComponent('DataPickerDemo', () => DataPickerDemo); 运行截图如下:
(四)最后总结
今天我们主要讲解学习了DatePickerAndroid基本相关介绍和使用详解，大家有问题可以加一下群React Native技术交流2群( 496601483 ).或者底下进行回复一下。
尊重原创，转载请注明：From Sky丶清（ http://www.lcode.org/ ） 侵权必究！
关注我的订阅号(codedev123),每天分享移动开发技术(Android/IOS),项目管理以及博客文章!(欢迎关注，第一时间推送精彩文章)
关注我的微博，可以获得更多精彩内容
