【React Native開發】React Native控件之DatePickerAndroid時間日期選擇器組件講解(34)

TraNevarez 9年前發布 | 71K 次閱讀 Android開發移動開發 React Native

來自： 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);

運行截圖如下: