【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);

运行截图如下: