首页 » React Native » React Native技术文章 » 正文

【React Native开发】React Native控件之DatePickerAndroid时间日期选择器组件讲解(34)

尊重版权,转载请注明出处

本文来自:江清清的技术专栏(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/facebook/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),项目管理以及博客文章!(欢迎关注,第一时间推送精彩文章)

关注我的微博,可以获得更多精彩内容