详解React Native开源时间日期选择器组件(react-native-datetime)
程序员文章站
2022-09-08 11:26:18
项目介绍
该组件进行封装一个时间日期选择器,同时适配android、ios双平台,该组件基于@remobile/react-native-datetime-picke...
项目介绍
该组件进行封装一个时间日期选择器,同时适配android、ios双平台,该组件基于@remobile/react-native-datetime-picker进行开发而来
配置安装
npm install react-native-datetime --save
1.1.ios环境配置
上面步骤完成之后,直接前台写js代码即可
1.2.android环境配置
在android/setting.gradle文件中如下配置
... include ':react-native-datetime' project(':react-native-datetime').projectdir = new file(rootproject.projectdir, '../node_modules/react-native-datetime/android')
在android/app/build.gradle文件中如下配置
... dependencies { ... compile project(':react-native-datetime') }
在mainactivity.java中进行注册模块
①.react native>=0.18开始
import com.keyee.datetime.*; // <--- import public class mainactivity extends reactactivity { ...... /** * a list of packages used by the app. if the app uses additional views * or modules besides the default ones, add more packages here. */ @override protected list<reactpackage> getpackages() { return arrays.<reactpackage>aslist( new rctdatetimepickerpackage(this), // <------ add here new mainreactpackage()); } }
①.react native<=0.17版本
import com.keyee.datetime.*; // <--- import public class mainactivity extends activity implements defaulthardwarebackbtnhandler { ...... @override protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); mreactrootview = new reactrootview(this); mreactinstancemanager = reactinstancemanager.builder() .setapplication(getapplication()) .setbundleassetname("index.android.bundle") .setjsmainmodulename("index.android") .addpackage(new mainreactpackage()) .addpackage(new rctdatetimepickerpackage(this)) // <------ add here .setusedevelopersupport(buildconfig.debug) .setinitiallifecyclestate(lifecyclestate.resumed) .build(); mreactrootview.startreactapplication(mreactinstancemanager, "examplern", null); setcontentview(mreactrootview); } ...... }
运行截图
ios运行效果
android运行效果
使用方法
<datetimepicker ref={(picker)=>{this.picker=picker}}/> ... this.picker.showdatepicker(...) this.picker.showtimepicker(...) this.picker.showdatetimepicker(...)
在ios平台上面使用,需要确保当前datatimepicker视图在顶部
使用实例
'use strict'; var react = require('react-native'); var { stylesheet, touchableopacity, view, text, } = react; var datetimepicker = require('react-native-datetime'); var button = require('@remobile/react-native-simple-button'); module.exports = react.createclass({ getinitialstate() { return { date: new date(), } }, showdatepicker() { var date = this.state.date; this.picker.showdatepicker(date, (d)=>{ this.setstate({date:d}); }); }, showtimepicker() { var date = this.state.date; this.picker.showtimepicker(date, (d)=>{ this.setstate({date:d}); }); }, showdatetimepicker() { var date = this.state.date; this.picker.showdatetimepicker(date, (d)=>{ this.setstate({date:d}); }); }, render() { return ( <view style={styles.container}> <text style={{textalign: 'center'}}> {this.state.date.tostring()} </text> <view style={{height:40}} /> <button onpress={this.showdatepicker}>showdatepicker</button> <view style={{height:40}} /> <button onpress={this.showtimepicker}>showtimepicker</button> <view style={{height:40}} /> <button onpress={this.showdatetimepicker}>showdatetimepicker</button> <datetimepicker ref={(picker)=>{this.picker=picker}}/> </view> ); }, }); var styles = stylesheet.create({ container: { flex: 1, justifycontent: 'center', paddingtop:20, }, });
方法介绍
- showdatepicker(date, callback(date))
- showtimepicker(date, callback(date))
- showdatetimepicker(date, callback(date))
属性介绍
- canceltext (default: cancel)
- oktext (default: ok)
开源项目地址:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: js实现1,2,3,5数字按照概率生成