xgrn-picker
v0.2.5
Published
原生选择器
Downloads
1
Readme
安装说明
yarn add xgrn-picker
react-native link xgrn-picker
更新说明
0.2.1 更新人 元宵 修改内容:js调用原生picker时,init以后延迟show,需要修复
0.2.0 更新人 元宵 修改内容:修复js调用原生picker时,没有顺序调用的Bug
使用说明
本组件目前仅支持JS调用,暂不支持原生调用
日期选择器
import {
DatePickView,
}from "xgrn-picker";
_click = ()=>{
this.datePickView.show({
startDate: null,//时间范围的开始 默认为当前时间前20年 可省 Date类型
endDate: null, //时间范围的结束 默认为当前时间后20年 可省 Date类型
defaultSelectedDate: this.__dd,//默认选中时间 可省 Date类型
pickerTitle: '',//选择器Title 可省 String类型
cancelCallback: ()=>{},//取消回调(可省)
confirmCallBack: (date) => {//确认回调
let year = date.year;
let month = date.month - 1;
let day = date.day;
this.__dd = new Date(year,month,day);
console.warn(this.__dd);
}
});
}
render() {
return (
<View style={styles.container}>
<DatePickView ref={ref=> {this.datePickView = ref;}}/>
</View>
);
}
日期范围选择器
import {
TimeScopePickerView,
}from "xgrn-picker";
_click = ()=>{
this.dataPickView.show({
title: '请选择日期范围',//标题
startTitle: '开始时间',//开始时间(可省)
endTitle: '结束时间',//结束时间(可省)
startDate: this.__startDate,//默认开始时间(可省)
endDate: this.__endDate,//默认结束时间(可省)
confirmCallBack: (startDate,endDate)=>{
// 均为标准Date类型
this.__startDate = startDate;
this.__endDate = endDate;
},
cancelCallBack: ()=>{
console.log('取消了');(可省)
},
});
}
render() {
return (
<View style={styles.container}>
<TimeScopePickerView ref={ref=> {this.datePickView = ref;}}/>
</View>
);
}
ActionSheetView 数组选择器
import {
ActionSheetView,
}from "xgrn-picker";
_click = ()=>{
// 展示弹框
// * @param params 参数title(string),items(Array)
// * @param selectCallBack 选中回调
// * @param cancelCallBack 取消回调
this.actionSheetRef.show({
title: '请选择',//标题(可省)
items: ['拍照','选择照片'],//
},(item,index)=>{
//选中的回调
console.log(item,index);
},()=>{
//取消选择(可省)
});
}
render() {
return (
<View style={styles.container}>
<ActionSheetView ref={ref=> {this.actionSheetRef = ref;}}/>
</View>
);
}