react-native-picker

For pure javascript version -> v3.0.5

###Documentation

####Params

Key	Description	Type	Default
pickerConfirmBtnText		string	确认
pickerCancelBtnText		string	取消
pickerTitleText		string	请选择
pickerConfirmBtnColor		array	[1, 186, 245, 1]
pickerCancelBtnColor		array	[1, 186, 245, 1]
pickerTitleColor		array	[20, 20, 20, 1])
pickerToolBarBg		array	[232, 232, 232, 1]
pickerBg		array	[196, 199, 206, 1]
pickerData		array
wheelWidth		array
wheelFlex		array
selectedValue		array
onPickerConfirm		function
onPickerCancel		function
onPickerSelect		function

####Methods

Name	Description	Type	Default
init	init and pass parameters to picker
toggle	show or hide picker
show	show picker
hide	hide picker
isPickerShow	get status of picker, return a boolean

###Usage

####Step 1 - install

	npm install react-native-picker --save

####Step 2 - link

	react-native link

####Step 3 - import and use in project

	import Picker from 'react-native-picker';

	let data = [];
    for(var i=0;i<100;i++){
        data.push(i);
    }

    Picker.init({
        pickerData: data,
        selectedValue: [59],
        onPickerConfirm: data => {
            console.log(data);
        },
        onPickerCancel: data => {
            console.log(data);
        },
        onPickerSelect: data => {
            console.log(data);
        }
    });
    Picker.show();
	

###Notice

####support two modes:

1. parallel: such as time picker, wheels have no connection with each other

2. cascade: such as date picker, address picker .etc, when front wheel changed, the behind wheels will all be reset

3. customize width: wheels width can be customized both on the Android and iOS platform. ####parallel:

• single wheel:

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

• two or more wheel:

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

####cascade:

• two wheel

    pickerData = [
        {
            a: [1, 2, 3, 4]
        },
        {
            b: [5, 6, 7, 8]
        },
        ...
    ];
    selectedValue = ['a', 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']
                }
            ]
        },
        ...
    ]

####customize width:

• iOS

Wheels will be rendered by a specific number or regarded as auto case(equal division) in other types. If the length of wheelWidth array is less than the pickerData's, the unspecific width will be regarded as auto case (i.e. as much wide as possible).

	pickerData = [['12月31日 周五'], ['上午'], ['5'], ['00']],
	wheelWidth = ['auto', 10, 10, 10]

#####rendering

• Android

On Android platform, variable devices have so many different screen resolution that we can not give a specific point number to all of them. So wheels will be rendered with width weight which is something like flex in react-native. All you need to do is giving a proportion to each wheel of pickerData. If the length of wheelFlex array is less than the pickerData's, the unspecific wheel will be regarded as 0 weight (i.e. will not display).

	pickerData = [['12月31日 周五'], ['上午'], ['5'], ['00']],
	wheelFlex = [3, 1, 1, 1]

#####rendering