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

2024-10-12 18:40:18

本教程的实现效果如下:

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

三方组件的地址: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预设占位placeholder的使用

当我们首次打开一个app的时候会请求接口获取数据,那么获取数据的这段时间展示什么给用户呢?国内很多app都是千篇一律的用一个菊花代替(俗称loading),或者更有心一点的做一个好看一点的loading,但是这样当拿到数据渲染页面的时候会很生硬的切换,总感觉很low. facebook首页列表是用一个接近真实布局的骨架动画来代替loading,这东西可以称之为skeleton screen或者placeholder,但是翻译过来真不知道该翻译成什么合适,这么做的好处就是在内容加载完成后可以做到流
React Native模块之Permissions权限申请的实例相机

React Native模块之Permissions权限申请的实例详解前言对于移动开发,我们知道Android 6.0之后对于权限管理做了很大的升级,其类似于IOS的管理管理方式需要用手动授权是否允许使用当前权限, 在RN开发中同样存在这样一个模块. 处理方法在RN中提供了一个PermissionsAndroid的模块, 可以访问Android M(也就是6.0)开始提供的权限模型.有一些权限写在AndroidManifest.xml就可以在安装时自动获得.但有一些"危险"的权限
详解React Native监听Android回退按键与程序化退出应用

详解React Native监听Android回退按键与程序化退出应用前言我们知道Android回退按键,会控制页面返回, 并且退出应用并非真正意义退出,仍在后台运行,所以在某些场景下需要监控android回退按键,那么在React Native中应该如何应用呢?我们具体来看看. BackAndroid 此模块用于监听硬件的back键操作. 看下具体代码: BackAndroid.addEventListener('hardwareBackPress', function() { if (!
React-Native使用Mobx实现购物车功能

在工作中,购物车场景非常常见.本文实现基于React-Native和Mobx实现两种购物车例子. 其中,后期会加入动画等其他.本期先实现基础功能. 二:基于State实现购物车 1-:ShoppingCarPage.js export default class ShoppingCarPage extends Component { static navigationOptions = { headerTitle : '基于State购物车', }; constructor(props) { s
React-Native左右联动List的示例代码

一:左右联动List,在工作中很常见. 今天分享一个同事写的例子,本人只做了简单修改. 注意:本例子必须修改源码,参考本文第三条. 二:Coding ParcelPage.js: import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, FlatList, SectionList, Dimensions, TouchableOpacity, Image, } from 'reac
react.js 父子组件数据绑定实时通讯的示例代码

react.js我自己还在摸索学习中,碰到父子组件数据绑定实时通讯的问题,研究了一下,分享给大家,也给自己留个笔记: import React,{Component} from 'react' import ReactDOM from 'react-dom' class ChildCounter extends Component{ render(){ return( <div style={{border:'1px solid red'}}> {this.props.count} </
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.
vue-calendar-component 封装多日期选择组件的实例代码

实现效果安装vue-calendar-component日历组件 cnpm i vue-calendar-component --save //国内镜像引入 import Calendar from "vue-calendar-component"; export default { components: { Calendar }, } 封装 <template> <div class="x-f"> <Calendar ref=&
React Native日期时间选择组件的示例代码

React Native日期时间选择组件:react-native-datepicker,支持安卓和IOS双平台,支持单独选择日期.单独选择时间和选择日期和时间,支持自定义日期格式. 效果图安装方法 npm install react-native-datepicker --save 示例代码 <Text style={styles.instructions}>time: {this.state.time}</Text> <DatePicker style={{width:
解决antd日期选择组件,添加value就无法点击下一年和下一月问题

原因: 表单监听了关闭事件,执行了setState,若是给closeFloatingLayer增加延时就可看出来antd数据的变化. 解决方法: DatePicker外面套一层div,然后阻止冒泡补充知识:antd 的 RangePicker 中日期选择近三月今天遇到一个问题,日期插件中只能选择近三个月.代码如下: 属性中 disabledDate 就是日期禁止选择. 1.当前天之前 2.当前天之后 3.近三月 4.后三月以上这篇解决antd日期选择组件,添加value就无法点击下一年和下
基于vue2.0+vuex的日期选择组件功能实现

calendar vue日期选择组件一个选择日期的vue组件基于vue2.0 + vuex 原本是想找这样的一个组件的,查看了vuex后,发现vuex的写法还不是基于2.0的,所以就自己动手做了 demo展示&&项目中的使用目录结构 demo 用vue-cli 的webpack-simple构建的 calendar |--dist build生成的目录 |--doc 展示图片 |--src |--assets 资源 |--components |--calendar 日期组件 |--
详解vue移动端日期选择组件

先给大家分享一下源码:https://github.com/lx544690189/vue-mobile-calendar Build Setup # install dependencies npm install # build for production with minification npm run build Usage install npm install vue-mobile-calendar or:(from the dist folder) <script src=&quo
React Native可定制底板组件Magic Sheet使用示例

目录正文如何使用它 1.安装并导入 2.基本使用方法预览正文一个React Native组件,通过提供一个强制性的API,可以从应用程序的任何地方(甚至在组件之外)调用,以显示一个完全可定制的底部表单,并能够等待它解决并得到一个响应. 这个库依赖于Gorhom的/bottom-sheet 的模态组件,并接受相同的道具和儿童. 如何使用它 1.安装并导入 # Yarn $ yarn add react-native-magic-sheet # NPM $ npm i react-nati
react native仿微信PopupWindow效果的实例代码

在原生APP开发中,相信很多开发者都会见到这种场景:点击右上角更多的选项,弹出一个更多界面供用户选择.这种控件在原生开发中Android可以用PopupWindow实现,在iOS中可以用CMPopTipView,也可以自己写一个View实现.其类似的效果如下图所示: 实现思路分析: 要实现上面的视图,有很多种实现方式.前面的文章说过,要实现弹框相关的可以用React Native 提供的 Modal组件(Modal组件),使用Modal组件可以实现我们原生开发中的大多数效果. 要实现下拉三角,可
React Native中实现动态导入的示例代码

目录背景多业务包动态导入 Metro 打包原理打包过程 bundle 分析 __d函数 __r函数方案设计分识别入口树拆分 bundle 生成合总结背景随着业务的发展,每一个 React Native 应用的代码数量都在不断增加,bundle 体积不断膨胀,对应用性能的负面影响愈发明显.虽然我们可以通过 React Native 官方工具 Metro 进行拆包处理,拆分为一个基础包和一个业务包进行一定程度上的优化,但对日益增长的业务代码也无能为力,我们迫切地需要一套方案来
datePicker——日期选择控件（with jquery）

demo: http://demo.jb51.net/js/2011/jQuery_calendar/index.html down: http://www.jb51.net/jiaoben/19622.html 用法很简单,而且js文件也很小,之前也见过一些日期选择控件,但个头都比较大,影响速度可以设置日期的格式,可以选择日期的起止时间,如果不加参数的话,默认就是之前的日期不可选,而只能从今天开始选择现在My97 DatePicker也不错,不用jquery 一款很不错的基于JavaScri

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

相关推荐

随机推荐