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

{ 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()}> //点击取消按钮 触发事件

@H_696_45@ : null );

return (

this._showDatePicker()} //按钮: 点击触发方法 underlayColor='gray' > show DatePick {datePickerModal} //日期选择组件 @H_696_45@ ); } }

const styles = StyleSheet.create({
container: {
flex: 1,justifyContent: 'center',alignItems: 'center',BACkgroundColor: '#F5FCFF',},datePickerContainer: {
flex: 1,borderRadius: 5,BACkgroundColor: 'white',marginBottom: 10,});

AppRegistry.registerComponent('Demo',() => Demo);