react native随手记之滑动选择器react-native-picker

一. 安装

	 yarn add react-native-picker
	 
或   npm install react-native-picker --save

二. 属性

1. isLoop Android
   类型：boolean 默认：false
2. pickerTextElipsisLen Android
   类型：number 默认：6
3. .pickerconfirmBtnText 右侧按钮显示文字
   类型：string 默认：confirm
4. pickerCancelBtnText 左侧按钮显示文字
   类型：string 默认：cancel
5. pickerTitleText 标题文字
   类型：string 默认：pls select
6. pickerConfirmBtnColor 右侧按钮文字颜色
   类型：array 默认：[1,186,245,1]
7. pickerCancelBtnColor 左侧按钮文字颜色
   类型：array 默认：[1,186,245,1]
8. pickerTitleColor 标题文字颜色
   类型：string 默认：[20,20,20,1]
9. pickerToolBarBg 标题栏背景色
   类型：array 默认：[232,232,232,1]
10. pickerBg 选中背景色
    类型：array 默认：[196,196,196,1]
11. pickerToolBarFontSize 标题栏文字字号
    类型：number 默认：16
12. wheelFlex 联动item占比
    类型：array 默认：[1,1,1]
13. pickerFontSize 联动部分显示文字字号
    类型：number 默认：16
14. pickerFontColor 联动部分显示文字颜色
    类型：array 默认：[31,31,31,1]
15. pickerFontFamily
    类型：string
16. pickerRowHeight IOS item行高
    类型：number 默认：24
17. pickerData 联动数据
    类型：array
18. selectedValue 显示的选中值
    类型：array
19. onPickerConfirm function 选中值回调
20. onPickerCancel function 取消（右侧）按钮回调
21. onPickerSelect function 确认（左侧）按钮回调

三. 方法

1. init 初始化并设置参数
2. toggle 显示/隐藏选择器
3. show 显示
4. hide 隐藏
5. select 选中一行
6. isPickerShow 获取picker显示状态，返回boolean

四. 模式

1. 平行：例如时间选择器，轮子之间没有连接
2. 级联：如日期选择器，地址选择器等，当前轮更换时，后轮将全部重置
   平行：
   1. single wheel:

	pickerData = [1,2,3,4];
	selectedValue = 3;

4. two or more wheel:

	pickerData = [
   		[1,2,3,4],
	    [5,6,7,8],
   		...
	];
	selectedValue = [1, 5];

联动：
1.two wheel

	pickerData = [
    	{
        	a: [1, 2, 3, 4]
    	},
    	{
        	b: [5, 6, 7, 8]
    	},
    	...
	];
	selectedValue = ['a', 2];

2. three wheel

	pickerData = [
    	{
        	a: [
            	{
                	a1: [1, 2, 3, 4]
            	},
            	{
                	a2: [5, 6, 7, 8]
            	},
            	{
                	a3: [9, 10, 11, 12]
            	}
        	]
    	},
    	{
        	b: [
            	{
                	b1: [11, 22, 33, 44]
	            },
	            {
	                b2: [55, 66, 77, 88]
	            },
	            {
	                b3: [99, 1010, 1111, 1212]
	            }
	        ]
	    },
	    {
	        c: [
	            {
	                c1: ['a', 'b', 'c']
	            },
	            {
	                c2: ['aa', 'bb', 'cc']
	            },
	            {
	                c3: ['aaa', 'bbb', 'ccc']
	            }
	        ]
	    },
	    ...
	]

代码示例

1. TimeUtils

export default class TimeUtils {
    //获取当前日期  格式如 2018-12-15
    static getCurrentDate() {
        let currDate = new Date();
        let year = currDate.getFullYear();
        let month = (currDate.getMonth() + 1).toString();
        month = month.padStart(2, '0');
        let dateDay = currDate.getDate().toString();
        dateDay = dateDay.padStart(2, '0');
        let time = year + '-' + month + '-' + dateDay;
        return time;
    }

    //组装日期数据
    static createDateData() {
        let date = [];
        let currDate = new Date();
        let year = currDate.getFullYear();
        let month = currDate.getMonth() + 1;
        const startYear = year - 60;
        for (let i = startYear; i <= year; i++) {
            let month = [];
            for (let j = 1; j < 13; j++) {
                let day = [];
                if (j === 2) {
                    for (let k = 1; k < 29; k++) {
                        day.push(k + '日');
                    }
                    //Leap day for years that are divisible by 4, such as 2000, 2004
                    if (i % 4 === 0) {
                        day.push(29 + '日');
                    }
                } else if (j in {1: 1, 3: 1, 5: 1, 7: 1, 8: 1, 10: 1, 12: 1}) {
                    for (let k = 1; k < 32; k++) {
                        day.push(k + '日');
                    }
                } else {
                    for (let k = 1; k < 31; k++) {
                        day.push(k + '日');
                    }
                }
                let _month = {};
                _month[j + '月'] = day;
                month.push(_month);
            }
            let _date = {};
            _date[i + '年'] = month;
            date.push(_date);
        }
        return date;
    }


}

2. 调用

 //打开日期选择 视图
    showDatePicker = async () => {
        const {dispatch} = this.props;
        var year = '';
        var month = '';
        var day = '';
        var dateStr = TimeUtils.getCurrentDate();
        //console.log('dateStr',dateStr)
        year = dateStr.substring(0, 4);
        month = parseInt(dateStr.substring(5, 7));
        day = parseInt(dateStr.substring(8, 10));
        const token = await AsyncStorage.getItem(config.appConfig.USER_TOKEN);
        Picker.init({
            pickerTitleText: '生日',
            pickerCancelBtnText: '取消',
            pickerConfirmBtnText: '确定',
            selectedValue: [year + '年', month + '月', day + '日'],
            pickerBg: [255, 255, 255, 1],
            pickerData: TimeUtils.createDateData(),
            pickerFontColor: [33, 33, 33, 1],
            pickerToolBarBg:[255, 255, 255, 1],
            pickerFontSize:20,
            onPickerConfirm: (pickedValue, pickedIndex) => {
                var year = pickedValue[0].substring(0, pickedValue[0].length - 1);
                var month = pickedValue[1].substring(0, pickedValue[1].length - 1);
                month = month.padStart(2, '0');
                var day = pickedValue[2].substring(0, pickedValue[2].length - 1);
                day = day.padStart(2, '0');
                let str = year + '-' + month + '-' + day;

                dispatch({
                    type: 'userInfo/uploadInfo',
                    payload: {
                        birthday: str,
                    },
                    token: token,
                });
            },
            onPickerCancel: (pickedValue, pickedIndex) => {
                console.log('date', pickedValue, pickedIndex);
            },
            onPickerSelect: (pickedValue, pickedIndex) => {
                console.log('date', pickedValue, pickedIndex);
            },
        });
        Picker.show();
    };