react-native DatePicker日期選擇組件的實現

本教程的實現效果如下:

為了實現其淡入/淡出的覆蓋效果, 還有取消按鈕, 在此用了一個三方的組件, 大家可以先安裝一下:

三方組件的地址: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 就能看到效果了