react-native DatePicker日期選擇組件的實現(xiàn)代碼

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) { //改變?nèi)掌趕tate 
 alert(date); //彈出提示框: 顯示你選擇日期 
 this.setState({ 
 chooseDate: date 
 }); 
 }; 
 
 render() { 
 
 let datePickerModal = ( //日期選擇器組件 (根據(jù)標記賦值為 選擇器 或 空) 
 this.state.datePickerModalVisible ? 
 <CustomActionSheet 
 modalVisible={this.state.datePickerModalVisible} //顯隱標記 
 onCancel={()=>this._showDatePicker()}> //點擊取消按鈕 觸發(fā)事件 
 <View style={styles.datePickerContainer}> 
 <DatePickerIOS 
 mode={"datetime"} //選擇器模式: 'date'(日期), 'time'(時間), 'datetime'(日期和時間) 
 minimumDate={new Date()} //最小時間 (這里設(shè)置的是當前的時間) 
 minuteInterval={30} //最小時間間隔 (這里設(shè)置的是30分鐘) 
 date={this.state.chooseDate} //默認的時間 
 onDateChange={this._onDateChange.bind(this)} //日期被修改時回調(diào)此函數(shù) 
 /> 
 </View> 
 </CustomActionSheet> : null 
 ); 
 
 return ( 
 <View style={styles.container}> 
 <TouchableHighlight 
 style={{backgroundColor:'cyan', padding:5}} 
 onPress={()=>this._showDatePicker()} //按鈕: 點擊觸發(fā)方法 
 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);