React NativePickerIOS
Edit on GitHubProps #
Edit on GitHubExamples #
'use strict';
+PickerIOS – React Native | A framework for building native apps using React
PickerIOS
Edit on GitHubProps #
Edit on GitHubExamples #
'use strict';
var React = require('react-native');
var {
@@ -72,24 +72,21 @@
key={carMake}
value={carMake}
label={CAR_MAKES_AND_MODELS[carMake].name}
- />
- )
- )}
+ />
+ ))}
</PickerIOS>
<Text>Please choose a model of {make.name}:</Text>
<PickerIOS
selectedValue={this.state.modelIndex}
key={this.state.carMake}
onValueChange={(modelIndex) => this.setState({modelIndex})}>
- {CAR_MAKES_AND_MODELS[this.state.carMake].models.map(
- (modelName, modelIndex) => (
- <PickerItemIOS
- key={this.state.carMake + '_' + modelIndex}
- value={modelIndex}
- label={modelName}
- />
- ))
- }
+ {CAR_MAKES_AND_MODELS[this.state.carMake].models.map((modelName, modelIndex) => (
+ <PickerItemIOS
+ key={this.state.carMake + '_' + modelIndex}
+ value={modelIndex}
+ label={modelName}
+ />
+ ))}
</PickerIOS>
<Text>You selected: {selectionString}</Text>
</View>
@@ -97,6 +94,33 @@
},
});
+var PickerStyleExample = React.createClass({
+ getInitialState: function() {
+ return {
+ carMake: 'cadillac',
+ };
+ },
+
+ render: function() {
+ var make = CAR_MAKES_AND_MODELS[this.state.carMake];
+ var selectionString = make.name + ' ' + make.models[this.state.modelIndex];
+ return (
+ <PickerIOS
+ itemStyle={{fontSize: 25, color: 'red', textAlign: 'left', fontWeight: 'bold'}}
+ selectedValue={this.state.carMake}
+ onValueChange={(carMake) => this.setState({carMake, modelIndex: 0})}>
+ {Object.keys(CAR_MAKES_AND_MODELS).map((carMake) => (
+ <PickerItemIOS
+ key={carMake}
+ value={carMake}
+ label={CAR_MAKES_AND_MODELS[carMake].name}
+ />
+ ))}
+ </PickerIOS>
+ );
+ },
+});
+
exports.displayName = (undefined: ?string);
exports.title = '<PickerIOS>';
exports.description = 'Render lists of selectable options with UIPickerView.';
@@ -106,6 +130,12 @@ exports.examples : function(): ReactElement {
return <PickerExample />;
},
+},
+{
+ title: '<PickerIOS> with custom styling',
+ render: function(): ReactElement {
+ return <PickerStyleExample />;
+ },
}];