react-native DatePicker 날짜 선택 구성 요소 구현 코드

본 튜 토리 얼 의 실현 효 과 는 다음 과 같다.

페 이 드/페 이 드 오 버 레이 효 과 를 실현 하기 위해 취소 버튼 도 있 습 니 다.여기에 세 개의 구성 요 소 를 사 용 했 습 니 다.먼저 설치 할 수 있 습 니 다.
3 자 구성 요소 의 주소: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); 

터미널 에서 실행:react-native run-ios 에서 효 과 를 볼 수 있 습 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.