react-native DatePicker日期选择组件的实现代码

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 ? 
   this._showDatePicker()}> //点击取消按钮 触发事件 
      
       
       
     : null 
  ); 
 
  return ( 
    
    this._showDatePicker()} //按钮: 点击触发方法 
     underlayColor='gray' 
     > 
     show DatePick 
     
    {datePickerModal} //日期选择组件 
    
  ); 
 } 
} 
 
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);