kylefang/react-native
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native.git synced 2026-02-09 17:13:46 +08:00
Code Issues Packages Projects Releases Wiki Activity

Added support for styling the PickerIOS

Browse Source 
Summary:
 - PickerIOS accepts now a new prop: style
 - this prop modifies the native style of the RCTPicker allowing to modify the font size of the items (fontSize), color of the items (color, only 6 char HEX values for now) and alignment of the items (textAlign)
Closes https://github.com/facebook/react-native/pull/4490

Reviewed By: svcscm

Differential Revision: D2723190

Pulled By: nicklockwood

fb-gh-sync-id: ab9188192f1d0d087787dfed8c128073bfaa3235
This commit is contained in:
Emilio Rodriguez
2015-12-08 07:44:56 -08:00
committed by facebook-github-bot-3
parent e7a4b20d75
commit e2c35dddba
5 changed files with 107 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
Examples/UIExplorer/PickerIOSExample.js
View File

@@ -87,24 +87,21 @@ var PickerExample = React.createClass({
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>
@@ -112,6 +109,33 @@ var PickerExample = React.createClass({
},
});
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.';
@@ -121,4 +145,10 @@ exports.examples = [
render: function(): ReactElement {
return <PickerExample />;
},
},
{
title: '<PickerIOS> with custom styling',
render: function(): ReactElement {
return <PickerStyleExample />;
},
}];