Question

有没有好用的react native datepicker组件推荐

Answer 1

　　为了实现其淡入/淡出的覆盖效果, 还有取消按钮, 在此用了一个三方的组件, 大家可以先安装一下:

　　三方组件的地址:ithub/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地址:github/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);

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