欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-29 07:51:17
本教程的实现效果如下: 为了实现其淡入/淡出的覆盖效果, 还有取消按钮, 在此用了一个三方的组件, 大家可以先安装一下: 三方组件的地址:(可以看看,也可以...

本教程的实现效果如下:

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

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

三方组件的地址:(可以看看,也可以直接按我的步骤走)

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 就能看到效果了

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