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-sheetvar 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 就能看到效果了

 

 

 

 

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