ReactNative_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 ?
      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);

写好了,在terminal中运行:react-native run-ios 就能看到效果了