mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
14 lines
5.1 KiB
Markdown
14 lines
5.1 KiB
Markdown
---
|
|
id: version-0.21-picker
|
|
title: picker
|
|
original_id: picker
|
|
---
|
|
<a id="content"></a><table width="100%"><tbody><tr><td><h1><a class="anchor" name="picker"></a>Picker <a class="hash-link" href="undefined#picker">#</a></h1></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Libraries/Components/Picker/Picker.js">Edit on GitHub</a></td></tr></tbody></table><div><div><p>Renders the native picker component on iOS and Android. Example:</p><div class="prism language-javascript"><Picker
|
|
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>language<span class="token punctuation">}</span>
|
|
onValueChange<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>lang<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></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>language<span class="token punctuation">:</span> lang<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token operator">></span>
|
|
<Picker<span class="token punctuation">.</span>Item label<span class="token operator">=</span><span class="token string">"Java"</span> value<span class="token operator">=</span><span class="token string">"java"</span> <span class="token operator">/</span><span class="token operator">></span>
|
|
<Picker<span class="token punctuation">.</span>Item label<span class="token operator">=</span><span class="token string">"JavaScript"</span> value<span class="token operator">=</span><span class="token string">"js"</span> <span class="token operator">/</span><span class="token operator">></span>
|
|
<<span class="token operator">/</span>Picker<span class="token operator">></span></div></div><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="onvaluechange"></a>onValueChange <span class="propType">function</span> <a class="hash-link" href="undefined#onvaluechange">#</a></h4><div><p>Callback for when an item is selected. This is called with the following parameters:
|
|
- <code>itemValue</code>: the <code>value</code> prop of the item that was selected
|
|
- <code>itemPosition</code>: the index of the selected item in this picker</p></div></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><p>Value matching value of one of the items. Can be a string or an integer.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style <span class="propType">pickerStyleType</span> <a class="hash-link" href="undefined#style">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="testid"></a>testID <span class="propType">string</span> <a class="hash-link" href="undefined#testid">#</a></h4><div><p>Used to locate this view in end-to-end tests.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="enabled"></a><span class="platform">android</span>enabled <span class="propType">bool</span> <a class="hash-link" href="undefined#enabled">#</a></h4><div><p>If set to false, the picker will be disabled, i.e. the user will not be able to make a
|
|
selection.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="mode"></a><span class="platform">android</span>mode <span class="propType">enum('dialog', 'dropdown')</span> <a class="hash-link" href="undefined#mode">#</a></h4><div><p>On Android, specifies how to display the selection items when the user taps on the picker:</p><ul><li>'dialog': Show a modal dialog. This is the default.</li><li>'dropdown': Shows a dropdown anchored to the picker view</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="prompt"></a><span class="platform">android</span>prompt <span class="propType">string</span> <a class="hash-link" href="undefined#prompt">#</a></h4><div><p>Prompt string for this picker, used on Android in dialog mode as the title of the dialog.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="itemstyle"></a><span class="platform">ios</span>itemStyle <span class="propType">itemStylePropType</span> <a class="hash-link" href="undefined#itemstyle">#</a></h4><div><p>Style to apply to each of the item labels.</p></div></div></div></div><div class="docs-prevnext"><a class="docs-next" href="progressbarandroid.html#content">Next →</a></div> |