iOS 选择器

Props

Edit on GitHub

onValueChange 函数型

selectedValue 任意类型

例子

Edit on GitHub

1. 'use strict';
2. var React = require('react-native');
3. var {
4. PickerIOS,
5. Text,
6. View,
7. } = React;
8. var PickerItemIOS = PickerIOS.Item;
9. var CAR_MAKES_AND_MODELS = {
10. amc: {
11. name: 'AMC',
12. models: ['AMX', 'Concord', 'Eagle', 'Gremlin', 'Matador', 'Pacer'],
13. },
14. alfa: {
15. name: 'Alfa-Romeo',
16. models: ['159', '4C', 'Alfasud', 'Brera', 'GTV6', 'Giulia', 'MiTo', 'Spider'],
17. },
18. aston: {
19. name: 'Aston Martin',
20. models: ['DB5', 'DB9', 'DBS', 'Rapide', 'Vanquish', 'Vantage'],
21. },
22. audi: {
23. name: 'Audi',
24. models: ['90', '4000', '5000', 'A3', 'A4', 'A5', 'A6', 'A7', 'A8', 'Q5', 'Q7'],
25. },
26. austin: {
27. name: 'Austin',
28. models: ['America', 'Maestro', 'Maxi', 'Mini', 'Montego', 'Princess'],
29. },
30. borgward: {
31. name: 'Borgward',
32. models: ['Hansa', 'Isabella', 'P100'],
33. },
34. buick: {
35. name: 'Buick',
36. models: ['Electra', 'LaCrosse', 'LeSabre', 'Park Avenue', 'Regal',
37. 'Roadmaster', 'Skylark'],
38. },
39. cadillac: {
40. name: 'Cadillac',
41. models: ['Catera', 'Cimarron', 'Eldorado', 'Fleetwood', 'Sedan de Ville'],
42. },
43. chevrolet: {
44. name: 'Chevrolet',
45. models: ['Astro', 'Aveo', 'Bel Air', 'Captiva', 'Cavalier', 'Chevelle',
46. 'Corvair', 'Corvette', 'Cruze', 'Nova', 'SS', 'Vega', 'Volt'],
47. },
48. };
49. var PickerExample = React.createClass({
50. getInitialState: function() {
51. return {
52. carMake: 'cadillac',
53. modelIndex: 3,
54. };
55. },
56. render: function() {
57. var make = CAR_MAKES_AND_MODELS[this.state.carMake];
58. var selectionString = make.name + ' ' + make.models[this.state.modelIndex];
59. return (
60. <View>
61. <Text>Please choose a make for your car:</Text>
62. <PickerIOS
63. selectedValue={this.state.carMake}
64. onValueChange={(carMake) => this.setState({carMake, modelIndex: 0})}>
65. {Object.keys(CAR_MAKES_AND_MODELS).map((carMake) => (
66. <PickerItemIOS
67. key={carMake}
68. value={carMake}
69. label={CAR_MAKES_AND_MODELS[carMake].name}
70. />
71. )
72. )}
73. </PickerIOS>
74. <Text>Please choose a model of {make.name}:</Text>
75. <PickerIOS
76. selectedValue={this.state.modelIndex}
77. key={this.state.carMake}
78. onValueChange={(modelIndex) => this.setState({modelIndex})}>
79. {CAR_MAKES_AND_MODELS[this.state.carMake].models.map(
80. (modelName, modelIndex) => (
81. <PickerItemIOS
82. key={this.state.carmake + '_' + modelIndex}
83. value={modelIndex}
84. label={modelName}
85. />
86. ))
87. }
88. </PickerIOS>
89. <Text>You selected: {selectionString}</Text>
90. </View>
91. );
92. },
93. });
94. exports.title = '<PickerIOS>';
95. exports.description = 'Render lists of selectable options with UIPickerView.';
96. exports.examples = [
97. {
98. title: '<PickerIOS>',
99. render: function(): ReactElement {
100. return <PickerExample />;
101. },
102. }];