react月份选择控件_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-sheet

var CustomActionSheet = require('react-native-custom-action-sheet');

class Demo extends Component {

state = {

datePickerModalVisible: false, //选择器显隐标记

chooseDate: new Date() //选择的日期