xgrn-picker

安装说明

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>
        );
}