Files
react-native/website/versioned_docs/0.21/pickerios.md
T
2017-10-27 11:51:58 -07:00

145 lines
29 KiB
Markdown

---
id: version-0.21-pickerios
title: pickerios
original_id: pickerios
---
<a id="content"></a><table width="100%"><tbody><tr><td><h1><a class="anchor" name="pickerios"></a>PickerIOS <a class="hash-link" href="undefined#pickerios">#</a></h1></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Libraries/Picker/PickerIOS.ios.js">Edit on GitHub</a></td></tr></tbody></table><div><noscript></noscript><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="undefined#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="view"></a><a href="view.html#props">View props...</a> <a class="hash-link" href="undefined#view">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="itemstyle"></a>itemStyle <span class="propType">itemStylePropType</span> <a class="hash-link" href="undefined#itemstyle">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onvaluechange"></a>onValueChange <span class="propType">function</span> <a class="hash-link" href="undefined#onvaluechange">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="selectedvalue"></a>selectedValue <span class="propType">any</span> <a class="hash-link" href="undefined#selectedvalue">#</a></h4></div></div></div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="undefined#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/PickerIOSExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> React <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react-native'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> <span class="token punctuation">{</span>
PickerIOS<span class="token punctuation">,</span>
Text<span class="token punctuation">,</span>
View<span class="token punctuation">,</span>
<span class="token punctuation">}</span> <span class="token operator">=</span> React<span class="token punctuation">;</span>
<span class="token keyword">var</span> PickerItemIOS <span class="token operator">=</span> PickerIOS<span class="token punctuation">.</span>Item<span class="token punctuation">;</span>
<span class="token keyword">var</span> CAR_MAKES_AND_MODELS <span class="token operator">=</span> <span class="token punctuation">{</span>
amc<span class="token punctuation">:</span> <span class="token punctuation">{</span>
name<span class="token punctuation">:</span> <span class="token string">'AMC'</span><span class="token punctuation">,</span>
models<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'AMX'</span><span class="token punctuation">,</span> <span class="token string">'Concord'</span><span class="token punctuation">,</span> <span class="token string">'Eagle'</span><span class="token punctuation">,</span> <span class="token string">'Gremlin'</span><span class="token punctuation">,</span> <span class="token string">'Matador'</span><span class="token punctuation">,</span> <span class="token string">'Pacer'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
alfa<span class="token punctuation">:</span> <span class="token punctuation">{</span>
name<span class="token punctuation">:</span> <span class="token string">'Alfa-Romeo'</span><span class="token punctuation">,</span>
models<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'159'</span><span class="token punctuation">,</span> <span class="token string">'4C'</span><span class="token punctuation">,</span> <span class="token string">'Alfasud'</span><span class="token punctuation">,</span> <span class="token string">'Brera'</span><span class="token punctuation">,</span> <span class="token string">'GTV6'</span><span class="token punctuation">,</span> <span class="token string">'Giulia'</span><span class="token punctuation">,</span> <span class="token string">'MiTo'</span><span class="token punctuation">,</span> <span class="token string">'Spider'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
aston<span class="token punctuation">:</span> <span class="token punctuation">{</span>
name<span class="token punctuation">:</span> <span class="token string">'Aston Martin'</span><span class="token punctuation">,</span>
models<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'DB5'</span><span class="token punctuation">,</span> <span class="token string">'DB9'</span><span class="token punctuation">,</span> <span class="token string">'DBS'</span><span class="token punctuation">,</span> <span class="token string">'Rapide'</span><span class="token punctuation">,</span> <span class="token string">'Vanquish'</span><span class="token punctuation">,</span> <span class="token string">'Vantage'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
audi<span class="token punctuation">:</span> <span class="token punctuation">{</span>
name<span class="token punctuation">:</span> <span class="token string">'Audi'</span><span class="token punctuation">,</span>
models<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'90'</span><span class="token punctuation">,</span> <span class="token string">'4000'</span><span class="token punctuation">,</span> <span class="token string">'5000'</span><span class="token punctuation">,</span> <span class="token string">'A3'</span><span class="token punctuation">,</span> <span class="token string">'A4'</span><span class="token punctuation">,</span> <span class="token string">'A5'</span><span class="token punctuation">,</span> <span class="token string">'A6'</span><span class="token punctuation">,</span> <span class="token string">'A7'</span><span class="token punctuation">,</span> <span class="token string">'A8'</span><span class="token punctuation">,</span> <span class="token string">'Q5'</span><span class="token punctuation">,</span> <span class="token string">'Q7'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
austin<span class="token punctuation">:</span> <span class="token punctuation">{</span>
name<span class="token punctuation">:</span> <span class="token string">'Austin'</span><span class="token punctuation">,</span>
models<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'America'</span><span class="token punctuation">,</span> <span class="token string">'Maestro'</span><span class="token punctuation">,</span> <span class="token string">'Maxi'</span><span class="token punctuation">,</span> <span class="token string">'Mini'</span><span class="token punctuation">,</span> <span class="token string">'Montego'</span><span class="token punctuation">,</span> <span class="token string">'Princess'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
borgward<span class="token punctuation">:</span> <span class="token punctuation">{</span>
name<span class="token punctuation">:</span> <span class="token string">'Borgward'</span><span class="token punctuation">,</span>
models<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'Hansa'</span><span class="token punctuation">,</span> <span class="token string">'Isabella'</span><span class="token punctuation">,</span> <span class="token string">'P100'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
buick<span class="token punctuation">:</span> <span class="token punctuation">{</span>
name<span class="token punctuation">:</span> <span class="token string">'Buick'</span><span class="token punctuation">,</span>
models<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'Electra'</span><span class="token punctuation">,</span> <span class="token string">'LaCrosse'</span><span class="token punctuation">,</span> <span class="token string">'LeSabre'</span><span class="token punctuation">,</span> <span class="token string">'Park Avenue'</span><span class="token punctuation">,</span> <span class="token string">'Regal'</span><span class="token punctuation">,</span>
<span class="token string">'Roadmaster'</span><span class="token punctuation">,</span> <span class="token string">'Skylark'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
cadillac<span class="token punctuation">:</span> <span class="token punctuation">{</span>
name<span class="token punctuation">:</span> <span class="token string">'Cadillac'</span><span class="token punctuation">,</span>
models<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'Catera'</span><span class="token punctuation">,</span> <span class="token string">'Cimarron'</span><span class="token punctuation">,</span> <span class="token string">'Eldorado'</span><span class="token punctuation">,</span> <span class="token string">'Fleetwood'</span><span class="token punctuation">,</span> <span class="token string">'Sedan de Ville'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
chevrolet<span class="token punctuation">:</span> <span class="token punctuation">{</span>
name<span class="token punctuation">:</span> <span class="token string">'Chevrolet'</span><span class="token punctuation">,</span>
models<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'Astro'</span><span class="token punctuation">,</span> <span class="token string">'Aveo'</span><span class="token punctuation">,</span> <span class="token string">'Bel Air'</span><span class="token punctuation">,</span> <span class="token string">'Captiva'</span><span class="token punctuation">,</span> <span class="token string">'Cavalier'</span><span class="token punctuation">,</span> <span class="token string">'Chevelle'</span><span class="token punctuation">,</span>
<span class="token string">'Corvair'</span><span class="token punctuation">,</span> <span class="token string">'Corvette'</span><span class="token punctuation">,</span> <span class="token string">'Cruze'</span><span class="token punctuation">,</span> <span class="token string">'Nova'</span><span class="token punctuation">,</span> <span class="token string">'SS'</span><span class="token punctuation">,</span> <span class="token string">'Vega'</span><span class="token punctuation">,</span> <span class="token string">'Volt'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> PickerExample <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">createClass<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
getInitialState<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span>
carMake<span class="token punctuation">:</span> <span class="token string">'cadillac'</span><span class="token punctuation">,</span>
modelIndex<span class="token punctuation">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
render<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">var</span> make <span class="token operator">=</span> CAR_MAKES_AND_MODELS<span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>carMake<span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> selectionString <span class="token operator">=</span> make<span class="token punctuation">.</span>name <span class="token operator">+</span> <span class="token string">' '</span> <span class="token operator">+</span> make<span class="token punctuation">.</span>models<span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>modelIndex<span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
&lt;View<span class="token operator">&gt;</span>
&lt;Text<span class="token operator">&gt;</span>Please choose a make <span class="token keyword">for</span> your car<span class="token punctuation">:</span>&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
&lt;PickerIOS
selectedValue<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>carMake<span class="token punctuation">}</span>
onValueChange<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>carMake<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState<span class="token punctuation">(</span></span><span class="token punctuation">{</span>carMake<span class="token punctuation">,</span> modelIndex<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
<span class="token punctuation">{</span>Object<span class="token punctuation">.</span><span class="token function">keys<span class="token punctuation">(</span></span>CAR_MAKES_AND_MODELS<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map<span class="token punctuation">(</span></span><span class="token punctuation">(</span>carMake<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">(</span>
&lt;PickerItemIOS
key<span class="token operator">=</span><span class="token punctuation">{</span>carMake<span class="token punctuation">}</span>
value<span class="token operator">=</span><span class="token punctuation">{</span>carMake<span class="token punctuation">}</span>
label<span class="token operator">=</span><span class="token punctuation">{</span>CAR_MAKES_AND_MODELS<span class="token punctuation">[</span>carMake<span class="token punctuation">]</span><span class="token punctuation">.</span>name<span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
&lt;<span class="token operator">/</span>PickerIOS<span class="token operator">&gt;</span>
&lt;Text<span class="token operator">&gt;</span>Please choose a model of <span class="token punctuation">{</span>make<span class="token punctuation">.</span>name<span class="token punctuation">}</span><span class="token punctuation">:</span>&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
&lt;PickerIOS
selectedValue<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>modelIndex<span class="token punctuation">}</span>
key<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>carMake<span class="token punctuation">}</span>
onValueChange<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>modelIndex<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState<span class="token punctuation">(</span></span><span class="token punctuation">{</span>modelIndex<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
<span class="token punctuation">{</span>CAR_MAKES_AND_MODELS<span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>carMake<span class="token punctuation">]</span><span class="token punctuation">.</span>models<span class="token punctuation">.</span><span class="token function">map<span class="token punctuation">(</span></span><span class="token punctuation">(</span>modelName<span class="token punctuation">,</span> modelIndex<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">(</span>
&lt;PickerItemIOS
key<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>carMake <span class="token operator">+</span> <span class="token string">'_'</span> <span class="token operator">+</span> modelIndex<span class="token punctuation">}</span>
value<span class="token operator">=</span><span class="token punctuation">{</span>modelIndex<span class="token punctuation">}</span>
label<span class="token operator">=</span><span class="token punctuation">{</span>modelName<span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
&lt;<span class="token operator">/</span>PickerIOS<span class="token operator">&gt;</span>
&lt;Text<span class="token operator">&gt;</span>You selected<span class="token punctuation">:</span> <span class="token punctuation">{</span>selectionString<span class="token punctuation">}</span>&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> PickerStyleExample <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">createClass<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
getInitialState<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span>
carMake<span class="token punctuation">:</span> <span class="token string">'cadillac'</span><span class="token punctuation">,</span>
modelIndex<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
render<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">var</span> make <span class="token operator">=</span> CAR_MAKES_AND_MODELS<span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>carMake<span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> selectionString <span class="token operator">=</span> make<span class="token punctuation">.</span>name <span class="token operator">+</span> <span class="token string">' '</span> <span class="token operator">+</span> make<span class="token punctuation">.</span>models<span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>modelIndex<span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
&lt;PickerIOS
itemStyle<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontSize<span class="token punctuation">:</span> <span class="token number">25</span><span class="token punctuation">,</span> color<span class="token punctuation">:</span> <span class="token string">'red'</span><span class="token punctuation">,</span> textAlign<span class="token punctuation">:</span> <span class="token string">'left'</span><span class="token punctuation">,</span> fontWeight<span class="token punctuation">:</span> <span class="token string">'bold'</span><span class="token punctuation">}</span><span class="token punctuation">}</span>
selectedValue<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>carMake<span class="token punctuation">}</span>
onValueChange<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>carMake<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState<span class="token punctuation">(</span></span><span class="token punctuation">{</span>carMake<span class="token punctuation">,</span> modelIndex<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
<span class="token punctuation">{</span>Object<span class="token punctuation">.</span><span class="token function">keys<span class="token punctuation">(</span></span>CAR_MAKES_AND_MODELS<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map<span class="token punctuation">(</span></span><span class="token punctuation">(</span>carMake<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">(</span>
&lt;PickerItemIOS
key<span class="token operator">=</span><span class="token punctuation">{</span>carMake<span class="token punctuation">}</span>
value<span class="token operator">=</span><span class="token punctuation">{</span>carMake<span class="token punctuation">}</span>
label<span class="token operator">=</span><span class="token punctuation">{</span>CAR_MAKES_AND_MODELS<span class="token punctuation">[</span>carMake<span class="token punctuation">]</span><span class="token punctuation">.</span>name<span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
&lt;<span class="token operator">/</span>PickerIOS<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
exports<span class="token punctuation">.</span>displayName <span class="token operator">=</span> <span class="token punctuation">(</span>undefined<span class="token punctuation">:</span> <span class="token operator">?</span>string<span class="token punctuation">)</span><span class="token punctuation">;</span>
exports<span class="token punctuation">.</span>title <span class="token operator">=</span> <span class="token string">'&lt;PickerIOS&gt;'</span><span class="token punctuation">;</span>
exports<span class="token punctuation">.</span>description <span class="token operator">=</span> <span class="token string">'Render lists of selectable options with UIPickerView.'</span><span class="token punctuation">;</span>
exports<span class="token punctuation">.</span>examples <span class="token operator">=</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'&lt;PickerIOS&gt;'</span><span class="token punctuation">,</span>
render<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span> ReactElement <span class="token punctuation">{</span>
<span class="token keyword">return</span> &lt;PickerExample <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'&lt;PickerIOS&gt; with custom styling'</span><span class="token punctuation">,</span>
render<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span> ReactElement <span class="token punctuation">{</span>
<span class="token keyword">return</span> &lt;PickerStyleExample <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="picker.html#content">Next →</a></div>