xn-rn-picker

react-native-picker

Documentation

Params

Key	Type	Default	Support	Description
isLoop	Boolean	false	Android
pickerConfirmBtnText	string	confirm	iOS/Android
pickerCancelBtnText	string	cancel	iOS/Android
pickerTitleText	string	pls select	iOS/Android
pickerConfirmBtnColor	array	[1, 186, 245, 1]	iOS/Android
pickerCancelBtnColor	array	[1, 186, 245, 1]	iOS/Android
pickerTitleColor	array	[20, 20, 20, 1]	iOS/Android
pickerToolBarBg	array	[232, 232, 232, 1]	iOS/Android
pickerBg	array	[196, 199, 206, 1]	iOS/Android
pickerToolBarFontSize	number	16	iOS/Android
wheelFlex	array	[1, 1, 1]	iOS/Android
pickerFontSize	number	16	iOS/Android
pickerFontColor	array	[31, 31, 31, 1]	iOS/Android
pickerRowHeight	number	24	iOS
pickerData	array		iOS/Android
selectedValue	array		iOS/Android
onPickerConfirm	function		iOS/Android
onPickerCancel	function		iOS/Android
onPickerSelect	function		iOS/Android

Methods

Key	Support	Description
init	iOS/Android	init and pass parameters to picker
toggle	iOS/Android	show or hide picker
show	iOS/Android	show picker
hide	iOS/Android	hide picker
select	iOS/Android	select a row
isPickerShow	iOS/Android	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();
	

Integration With Existing Apps (iOS)

The Podfile will like below:

platform :ios, '8.0'
target 'YourTarget' do
    pod 'React', :path => '../YOUR_REACT_NATIVE_PROJECT/node_modules/react-native', :subspecs => [
    'Core',
    ...
    ]
    pod 'Picker', :path => '../YOUR_REACT_NATIVE_PROJECT/node_modules/react-native-picker'
end

After you have updated the Podfile of the existing app, you can install react-native-picker like below:

$ pod install

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

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']
                }
            ]
        },
        ...
    ]

For pure javascript version -> v3.0.5