1 | # react-native-wheel-picker
|
2 | [![npm version](http://img.shields.io/npm/v/react-native-wheel-picker.svg?style=flat-square)](https://npmjs.org/package/react-native-wheel-picker "View this project on npm")
|
3 | [![npm version](http://img.shields.io/npm/dm/react-native-wheel-picker.svg?style=flat-square)](https://npmjs.org/package/react-native-wheel-picker "View this project on npm")
|
4 |
|
5 | ## Introduction
|
6 | Cross platform Picker component based on React-native.
|
7 |
|
8 | Since picker is originally supported by ios while Android only supports a ugly Spinner component. If you want to have the same user behaviour, you can use this.
|
9 |
|
10 | The android component is based on https://github.com/AigeStudio/WheelPicker which runs super fast and smoothly. It also supports curved effect which make it exactly the same looking and feel as the ios picker.
|
11 | ![](https://raw.githubusercontent.com/lesliesam/react-native-wheel-picker/master/demo.gif)
|
12 | ![](https://raw.githubusercontent.com/lesliesam/react-native-wheel-picker/master/demo_android.gif)
|
13 |
|
14 | ## How to use
|
15 |
|
16 | Run command
|
17 |
|
18 | For apps using RN 0.32 or higher, please run
|
19 | ```
|
20 | npm i react-native-wheel-picker --save
|
21 | ```
|
22 | For apps using RN 0.31 or less, please run
|
23 | ```
|
24 | npm install --save --save-exact react-native-wheel-picker@1.0.1
|
25 | ```
|
26 | Add in settings.gradle
|
27 | ```
|
28 | include ':react-native-wheel-picker'
|
29 | project(':react-native-wheel-picker').projectDir = new File(settingsDir, '../node_modules/react-native-wheel-picker/android')
|
30 | ```
|
31 | Add in app/build.gradle
|
32 | ```
|
33 | compile project(':react-native-wheel-picker')
|
34 | ```
|
35 | Modify MainApplication
|
36 | ```
|
37 | import com.zyu.ReactNativeWheelPickerPackage;
|
38 | ......
|
39 |
|
40 | protected List<ReactPackage> getPackages() {
|
41 | return Arrays.<ReactPackage>asList(
|
42 | new MainReactPackage(), new ReactNativeWheelPickerPackage()
|
43 | );
|
44 | }
|
45 | ```
|
46 |
|
47 | ## Example code
|
48 | ```
|
49 | import React, { Component } from 'react';
|
50 | import {
|
51 | Platform,
|
52 | StyleSheet,
|
53 | Text,
|
54 | View,
|
55 | } from 'react-native';
|
56 |
|
57 |
|
58 | import Picker from 'react-native-wheel-picker'
|
59 | var PickerItem = Picker.Item;
|
60 |
|
61 | export default class App extends Component<{}> {
|
62 |
|
63 | constructor(props) {
|
64 | super(props);
|
65 | this.state = {
|
66 | selectedItem : 2,
|
67 | itemList: ['刘备', '张飞', '关羽', '赵云', '黄忠', '马超', '魏延', '诸葛亮']
|
68 | };
|
69 | }
|
70 |
|
71 | onPickerSelect (index) {
|
72 | this.setState({
|
73 | selectedItem: index,
|
74 | })
|
75 | }
|
76 |
|
77 | onAddItem = () => {
|
78 | var name = '司马懿'
|
79 | if (this.state.itemList.indexOf(name) == -1) {
|
80 | this.state.itemList.push(name)
|
81 | }
|
82 | this.setState({
|
83 | selectedItem: this.state.itemList.indexOf(name),
|
84 | })
|
85 | }
|
86 |
|
87 | render () {
|
88 | return (
|
89 | <View style={styles.container}>
|
90 | <Text style={styles.welcome}>
|
91 | Welcome to React Native!
|
92 | </Text>
|
93 | <Picker style={{width: 150, height: 180}}
|
94 | selectedValue={this.state.selectedItem}
|
95 | itemStyle={{color:"white", fontSize:26}}
|
96 | onValueChange={(index) => this.onPickerSelect(index)}>
|
97 | {this.state.itemList.map((value, i) => (
|
98 | <PickerItem label={value} value={i} key={"money"+value}/>
|
99 | ))}
|
100 | </Picker>
|
101 | <Text style={{margin: 20, color: '#ffffff'}}>
|
102 | 你最喜欢的是:{this.state.itemList[this.state.selectedItem]}
|
103 | </Text>
|
104 |
|
105 | <Text style={{margin: 20, color: '#ffffff'}}
|
106 | onPress={this.onAddItem}>
|
107 | 怎么没有司马懿?
|
108 | </Text>
|
109 | </View>
|
110 | );
|
111 | }
|
112 | }
|
113 |
|
114 | const styles = StyleSheet.create({
|
115 | container: {
|
116 | flex: 1,
|
117 | justifyContent: 'center',
|
118 | alignItems: 'center',
|
119 | backgroundColor: '#1962dd',
|
120 | },
|
121 | welcome: {
|
122 | fontSize: 20,
|
123 | textAlign: 'center',
|
124 | margin: 10,
|
125 | color: '#ffffff',
|
126 | },
|
127 | instructions: {
|
128 | textAlign: 'center',
|
129 | color: '#333333',
|
130 | marginBottom: 5,
|
131 | },
|
132 | });
|
133 | ```
|