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

 更新时间:2017年09月12日 14:46:13   作者:Agent_Skye  
本篇文章主要介绍了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() //选择的日期 
 }; 
 
 _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 就能看到效果了

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析

    React Native中ScrollView组件轮播图与ListView渲染列表组件用法

    这篇文章主要介绍了React Native中ScrollView组件轮播图与ListView渲染列表组件用法,结合实例形式详细分析了ScrollView组件轮播图与ListView渲染列表组件具体功能、使用方法与操作注意事项,需要的朋友可以参考下
    2020-01-01
  • React Hooks 实现和由来以及解决的问题详解

    React Hooks 实现和由来以及解决的问题详解

    这篇文章主要介绍了React Hooks 实现和由来以及解决的问题详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • react redux入门示例

    react redux入门示例

    本篇文章主要介绍了react redux入门示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • 在React中写一个Animation组件为组件进入和离开加上动画/过度效果

    在React中写一个Animation组件为组件进入和离开加上动画/过度效果

    这篇文章主要介绍了在React中写一个Animation组件为组件进入和离开加上动画/过度效果,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-06-06
  • react koa rematch 如何打造一套服务端渲染架子

    react koa rematch 如何打造一套服务端渲染架子

    这篇文章主要介绍了react koa rematch 如何打造一套服务端渲染架子,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-06-06
  • react-native android状态栏的实现

    react-native android状态栏的实现

    这篇文章主要介绍了react-native android状态栏的实现,使状态栏颜色与App颜色一致,使用户界面更加整体。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • webpack 2的react开发配置实例代码

    webpack 2的react开发配置实例代码

    本篇文章主要介绍了webpack 2的react开发配置实例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • 使用react实现手机号的数据同步显示功能的示例代码

    使用react实现手机号的数据同步显示功能的示例代码

    本篇文章主要介绍了使用react实现手机号的数据同步显示功能的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • ES6下React组件的写法示例代码

    ES6下React组件的写法示例代码

    这篇文章主要给大家介绍了在ES6下React组件的写法,其中包括定义React组件、声明prop类型与默认prop、设置初始state、自动绑定,文中分别给出了详细的示例代码供大家参考学习,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-05-05
  • 浅谈react性能优化的方法

    浅谈react性能优化的方法

    这篇文章主要介绍了浅谈react性能优化的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09

最新评论