Skip to content

yuanbolin/react-native-picker

This branch is 1 commit behind beefe/react-native-picker:master.

Folders and files

NameName
Last commit message
Last commit date
May 15, 2018
Jan 17, 2017
Jan 10, 2018
May 18, 2018
Dec 29, 2016
May 26, 2016
Apr 26, 2018
May 18, 2018
May 18, 2018
Apr 26, 2018
May 18, 2018

Repository files navigation

react-native-picker

npm version dependency status

ui3 ui4

Documentation

Params

Key Type Default Support Description
isLoop Boolean false Android
pickerTextEllipsisLen number 6 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
pickerFontFamily string 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

About

A Native Picker with high performance.

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • Java 58.7%
  • Objective-C 32.5%
  • JavaScript 7.1%
  • Python 1.2%
  • Ruby 0.5%