本教程的实现效果如下:
为了实现其淡入/淡出的覆盖效果, 还有取消按钮, 在此用了一个三方的组件, 大家可以先安装一下:
三方组件的地址: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() //选择的日期