4.3.7 • Published 7 years ago

react-native-picker v4.3.7

Weekly downloads
4,849
License
MIT
Repository
github
Last release
7 years ago

react-native-picker

npm version

ui3 ui4

Documentation

Params

KeyTypeDefaultSupportDescription
isLoopBooleanfalseAndroid
pickerTextEllipsisLennumber6Android
pickerConfirmBtnTextstringconfirmiOS/Android
pickerCancelBtnTextstringcanceliOS/Android
pickerTitleTextstringpls selectiOS/Android
pickerConfirmBtnColorarray1, 186, 245, 1iOS/Android
pickerCancelBtnColorarray1, 186, 245, 1iOS/Android
pickerTitleColorarray20, 20, 20, 1iOS/Android
pickerToolBarBgarray232, 232, 232, 1iOS/Android
pickerBgarray196, 199, 206, 1iOS/Android
pickerToolBarFontSizenumber16iOS/Android
wheelFlexarray1, 1, 1iOS/Android
pickerFontSizenumber16iOS/Android
pickerFontColorarray31, 31, 31, 1iOS/Android
pickerFontFamilystringiOS/Android
pickerRowHeightnumber24iOS
pickerDataarrayiOS/Android
selectedValuearrayiOS/Android
onPickerConfirmfunctioniOS/Android
onPickerCancelfunctioniOS/Android
onPickerSelectfunctioniOS/Android

Methods

KeySupportDescription
initiOS/Androidinit and pass parameters to picker
toggleiOS/Androidshow or hide picker
showiOS/Androidshow picker
hideiOS/Androidhide picker
selectiOS/Androidselect a row
isPickerShowiOS/Androidget 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

4.3.7

7 years ago

4.3.6

7 years ago

4.3.5

7 years ago

4.3.4

7 years ago

4.3.2

8 years ago

4.3.1

8 years ago

4.3.0

8 years ago

4.2.0

8 years ago

4.1.2

8 years ago

4.1.1

8 years ago

4.1.0

8 years ago

4.0.19

8 years ago

4.0.18

8 years ago

4.0.17

8 years ago

4.0.16

8 years ago

4.0.15

9 years ago

4.0.14

9 years ago

4.0.13

9 years ago

4.0.12

9 years ago

4.0.11

9 years ago

4.0.10

9 years ago

4.0.9

9 years ago

4.0.8

9 years ago

4.0.7

9 years ago

4.0.6

9 years ago

4.0.5

9 years ago

4.0.4

9 years ago

4.0.3

9 years ago

4.0.2

9 years ago

4.0.1

9 years ago

4.0.0

9 years ago

3.0.5

9 years ago

3.0.4

9 years ago

3.0.3

9 years ago

3.0.2

9 years ago

3.0.1

9 years ago

3.0.0

9 years ago

2.0.5

9 years ago

2.0.4

9 years ago

2.0.3

9 years ago

2.0.2

9 years ago

2.0.1

9 years ago

2.0.0

9 years ago

1.1.1

9 years ago

1.1.0

9 years ago

1.0.0

9 years ago

0.4.1

9 years ago

0.4.0

9 years ago

0.3.5

9 years ago

0.3.4

9 years ago

0.3.3

9 years ago

0.3.2

9 years ago

0.3.1

9 years ago

0.3.0

9 years ago

0.2.11

9 years ago

0.2.10

9 years ago

0.2.9

10 years ago

0.2.8

10 years ago

0.2.7

10 years ago

0.2.6

10 years ago

0.2.5

10 years ago

0.2.4

10 years ago

0.2.3

10 years ago

0.2.2

10 years ago

0.2.1

10 years ago

0.2.0

10 years ago

0.1.2

10 years ago

0.1.0

10 years ago