Skip to content

Commit 7f119f9

Browse files
xwenliangxwenliang
committed
readme
1 parent 8e3588f commit 7f119f9

File tree

1 file changed

+98
-98
lines changed

1 file changed

+98
-98
lines changed

‎README.md‎

Lines changed: 98 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# react-native-picker-android
22

3-
A Picker written in pure javascript for cross-platform support
3+
PickerAndroid has PickerIOS interface in pure javascript
44

55
Needs react-native >= 0.14.2
66

@@ -16,108 +16,108 @@ Needs react-native >= 0.14.2
1616
####Step 1 - install
1717

1818
```
19-
npm install react-native-picker-android --save
19+
npm install react-native-picker-android --save
2020
```
2121

2222
####Step 2 - import and use in project
2323
```
24-
'use strict';
25-
26-
import React, {
27-
View,
28-
Text,
29-
Platform,
30-
PickerIOS
31-
} from 'react-native';
32-
33-
import PickerAndroid from 'react-native-picker-android';
34-
35-
let Picker = Platform.OS === 'ios' ? PickerIOS : PickerAndroid;
36-
let PickerItem = Picker.Item;
37-
38-
let CAR_MAKES_AND_MODELS = {
39-
amc: {
40-
name: 'AMC',
41-
models: ['AMX', 'Concord', 'Eagle', 'Gremlin', 'Matador', 'Pacer'],
42-
},
43-
alfa: {
44-
name: 'Alfa-Romeo',
45-
models: ['159', '4C', 'Alfasud', 'Brera', 'GTV6', 'Giulia', 'MiTo', 'Spider'],
46-
},
47-
aston: {
48-
name: 'Aston Martin',
49-
models: ['DB5', 'DB9', 'DBS', 'Rapide', 'Vanquish', 'Vantage'],
50-
},
51-
audi: {
52-
name: 'Audi',
53-
models: ['90', '4000', '5000', 'A3', 'A4', 'A5', 'A6', 'A7', 'A8', 'Q5', 'Q7'],
54-
},
55-
austin: {
56-
name: 'Austin',
57-
models: ['America', 'Maestro', 'Maxi', 'Mini', 'Montego', 'Princess'],
58-
},
59-
borgward: {
60-
name: 'Borgward',
61-
models: ['Hansa', 'Isabella', 'P100'],
62-
},
63-
buick: {
64-
name: 'Buick',
65-
models: ['Electra', 'LaCrosse', 'LeSabre', 'Park Avenue', 'Regal', 'Roadmaster', 'Skylark'],
66-
},
67-
cadillac: {
68-
name: 'Cadillac',
69-
models: ['Catera', 'Cimarron', 'Eldorado', 'Fleetwood', 'Sedan de Ville'],
70-
},
71-
chevrolet: {
72-
name: 'Chevrolet',
73-
models: ['Astro', 'Aveo', 'Bel Air', 'Captiva', 'Cavalier', 'Chevelle', 'Corvair', 'Corvette', 'Cruze', 'Nova', 'SS', 'Vega', 'Volt'],
74-
},
75-
};
76-
77-
export default class SomeScene extends React.Component {
78-
79-
constructor(props, context){
80-
super(props, context);
81-
this.state = {
82-
carMake: 'cadillac',
83-
modelIndex: 3,
84-
}
85-
}
24+
'use strict';
25+
26+
import React, {
27+
View,
28+
Text,
29+
Platform,
30+
PickerIOS
31+
} from 'react-native';
32+
33+
import PickerAndroid from 'react-native-picker-android';
34+
35+
let Picker = Platform.OS === 'ios' ? PickerIOS : PickerAndroid;
36+
let PickerItem = Picker.Item;
8637
87-
render() {
88-
let make = CAR_MAKES_AND_MODELS[this.state.carMake];
89-
let selectionString = make.name + ' ' + make.models[this.state.modelIndex];
90-
return (
91-
<View>
92-
<Text>Please choose a make for your car:</Text>
93-
<Picker
94-
selectedValue={this.state.carMake}
95-
onValueChange={(carMake) => this.setState({carMake, modelIndex: 0})}>
96-
{Object.keys(CAR_MAKES_AND_MODELS).map((carMake) => (
97-
<PickerItem
98-
key={carMake}
99-
value={carMake}
100-
label={CAR_MAKES_AND_MODELS[carMake].name}
101-
/>
102-
))}
103-
</Picker>
104-
<Text>Please choose a model of {make.name}:</Text>
105-
<Picker
106-
selectedValue={this.state.modelIndex}
107-
key={this.state.carMake}
108-
onValueChange={(modelIndex) => this.setState({modelIndex})}>
109-
{CAR_MAKES_AND_MODELS[this.state.carMake].models.map((modelName, modelIndex) => (
110-
<PickerItem
111-
key={this.state.carMake + '_' + modelIndex}
112-
value={modelIndex}
113-
label={modelName}
114-
/>
115-
))}
116-
</Picker>
117-
<Text>You selected: {selectionString}</Text>
118-
</View>
119-
);
38+
let CAR_MAKES_AND_MODELS = {
39+
amc: {
40+
name: 'AMC',
41+
models: ['AMX', 'Concord', 'Eagle', 'Gremlin', 'Matador', 'Pacer'],
42+
},
43+
alfa: {
44+
name: 'Alfa-Romeo',
45+
models: ['159', '4C', 'Alfasud', 'Brera', 'GTV6', 'Giulia', 'MiTo', 'Spider'],
46+
},
47+
aston: {
48+
name: 'Aston Martin',
49+
models: ['DB5', 'DB9', 'DBS', 'Rapide', 'Vanquish', 'Vantage'],
50+
},
51+
audi: {
52+
name: 'Audi',
53+
models: ['90', '4000', '5000', 'A3', 'A4', 'A5', 'A6', 'A7', 'A8', 'Q5', 'Q7'],
54+
},
55+
austin: {
56+
name: 'Austin',
57+
models: ['America', 'Maestro', 'Maxi', 'Mini', 'Montego', 'Princess'],
58+
},
59+
borgward: {
60+
name: 'Borgward',
61+
models: ['Hansa', 'Isabella', 'P100'],
62+
},
63+
buick: {
64+
name: 'Buick',
65+
models: ['Electra', 'LaCrosse', 'LeSabre', 'Park Avenue', 'Regal', 'Roadmaster', 'Skylark'],
66+
},
67+
cadillac: {
68+
name: 'Cadillac',
69+
models: ['Catera', 'Cimarron', 'Eldorado', 'Fleetwood', 'Sedan de Ville'],
70+
},
71+
chevrolet: {
72+
name: 'Chevrolet',
73+
models: ['Astro', 'Aveo', 'Bel Air', 'Captiva', 'Cavalier', 'Chevelle', 'Corvair', 'Corvette', 'Cruze', 'Nova', 'SS', 'Vega', 'Volt'],
74+
},
75+
};
76+
77+
export default class SomeScene extends React.Component {
78+
79+
constructor(props, context){
80+
super(props, context);
81+
this.state = {
82+
carMake: 'cadillac',
83+
modelIndex: 3,
12084
}
121-
};
85+
}
86+
87+
render() {
88+
let make = CAR_MAKES_AND_MODELS[this.state.carMake];
89+
let selectionString = make.name + ' ' + make.models[this.state.modelIndex];
90+
return (
91+
<View>
92+
<Text>Please choose a make for your car:</Text>
93+
<Picker
94+
selectedValue={this.state.carMake}
95+
onValueChange={(carMake) => this.setState({carMake, modelIndex: 0})}>
96+
{Object.keys(CAR_MAKES_AND_MODELS).map((carMake) => (
97+
<PickerItem
98+
key={carMake}
99+
value={carMake}
100+
label={CAR_MAKES_AND_MODELS[carMake].name}
101+
/>
102+
))}
103+
</Picker>
104+
<Text>Please choose a model of {make.name}:</Text>
105+
<Picker
106+
selectedValue={this.state.modelIndex}
107+
key={this.state.carMake}
108+
onValueChange={(modelIndex) => this.setState({modelIndex})}>
109+
{CAR_MAKES_AND_MODELS[this.state.carMake].models.map((modelName, modelIndex) => (
110+
<PickerItem
111+
key={this.state.carMake + '_' + modelIndex}
112+
value={modelIndex}
113+
label={modelName}
114+
/>
115+
))}
116+
</Picker>
117+
<Text>You selected: {selectionString}</Text>
118+
</View>
119+
);
120+
}
121+
};
122122
```
123123
![example](./doc/example.png)

0 commit comments

Comments
 (0)