Facebook/react-native
1
0
Fork 0
mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
63a3ba82fd72ca15f2d155ceab40237c8297da5d
react-native/docs/pickerios.html
T
Website Deployment Script 4c1c033a30 Updated docs for 0.27
2016-06-06 09:21:31 +00:00

159 lines
44 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>PickerIOS – React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="PickerIOS – React Native | A framework for building native apps using React"><meta property="og:type" content="website"><meta property="og:url" content="http://facebook.github.io/react-native/index.html"><meta property="og:image" content="http://facebook.github.io/react-native/img/opengraph.png?2"><meta property="og:description" content="A framework for building native apps using React"><base href="/react-native/"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"><link rel="shortcut icon" href="img/favicon.png?2"><link rel="stylesheet" href="css/react-native.css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href=""><img src="img/header_logo.png">React Native</a><a class="nav-version" href="/react-native/versions.html">0.27</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="docs/getting-started.html" class="active" data-target=".nav-docs">Docs</a></li><li><a href="support.html" class="">Support</a></li><li><a href="showcase.html" class="">Showcase</a></li><li><a href="blog/" class="">Blog</a></li></ul><div class="algolia-search-wrapper"><input id="algolia-doc-search" type="text" placeholder="Search docs..."></div><ul class="nav-site nav-site-external"><li><a href="https://github.com/facebook/react-native" class="">GitHub</a></li><li><a href="http://facebook.github.io/react" class="">React</a></li></ul></div></div></div><section class="content wrap documentationContent"><div class="nav-docs"><div class="nav-docs-viewport"><div class="nav-docs-section"><h3>Quick Start</h3><ul><li><a style="margin-left:0;" class="" href="docs/getting-started.html">Getting Started</a></li></ul></div><div class="nav-docs-section"><h3>Tutorials</h3><ul><li><a style="margin-left:0;" class="" href="docs/tutorial-core-components.html">Core Components</a></li></ul></div><div class="nav-docs-section"><h3>Sample Applications</h3><ul><li><a style="margin-left:0;" class="" href="docs/sample-application-movies.html">Movie Fetcher</a></li><li><a target="_blank" style="margin-left:0;" class="" href="http://makeitopen.com/">F8 2016 App</a></li></ul></div><div class="nav-docs-section"><h3>Community Resources</h3><ul><li><a style="margin-left:0;" class="" href="docs/videos.html">Videos</a></li><li><a target="_blank" style="margin-left:0;" class="" href="http://reactnative.cc/">Newsletter</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="docs/style.html">Style</a></li><li><a style="margin-left:0;" class="" href="docs/images.html">Images</a></li><li><a style="margin-left:0;" class="" href="docs/gesture-responder-system.html">Gesture Responder System</a></li><li><a style="margin-left:0;" class="" href="docs/animations.html">Animations</a></li><li><a style="margin-left:0;" class="" href="docs/accessibility.html">Accessibility</a></li><li><a style="margin-left:0;" class="" href="docs/direct-manipulation.html">Direct Manipulation</a></li><li><a style="margin-left:0;" class="" href="docs/debugging.html">Debugging</a></li><li><a style="margin-left:0;" class="" href="docs/testing.html">Testing</a></li><li><a style="margin-left:0;" class="" href="docs/javascript-environment.html">JavaScript Environment</a></li><li><a style="margin-left:0;" class="" href="docs/navigator-comparison.html">Navigator Comparison</a></li><li><a style="margin-left:0;" class="" href="docs/known-issues.html">Known Issues</a></li><li><a style="margin-left:0;" class="" href="docs/performance.html">Performance</a></li><li><a style="margin-left:0;" class="" href="docs/upgrading.html">Upgrading</a></li><li><a style="margin-left:0;" class="" href="docs/platform-specific-code.html">Platform Specific Code</a></li></ul></div><div class="nav-docs-section"><h3>Guides (iOS)</h3><ul><li><a style="margin-left:0;" class="" href="docs/native-modules-ios.html">Native Modules</a></li><li><a style="margin-left:0;" class="" href="docs/native-components-ios.html">Native UI Components</a></li><li><a style="margin-left:0;" class="" href="docs/linking-libraries-ios.html">Linking Libraries</a></li><li><a style="margin-left:0;" class="" href="docs/running-on-device-ios.html">Running On Device</a></li><li><a style="margin-left:0;" class="" href="docs/embedded-app-ios.html">Integrating with Existing Apps</a></li><li><a style="margin-left:0;" class="" href="docs/communication-ios.html">Communication between native and React Native</a></li></ul></div><div class="nav-docs-section"><h3>Guides (Android)</h3><ul><li><a style="margin-left:0;" class="" href="docs/native-modules-android.html">Native Modules</a></li><li><a style="margin-left:0;" class="" href="docs/native-components-android.html">Native UI Components</a></li><li><a style="margin-left:0;" class="" href="docs/running-on-device-android.html">Running On Device</a></li><li><a style="margin-left:0;" class="" href="docs/embedded-app-android.html">Integrating with Existing Apps</a></li><li><a style="margin-left:0;" class="" href="docs/signed-apk-android.html">Generating Signed APK</a></li><li><a style="margin-left:0;" class="" href="docs/android-ui-performance.html">Profiling Android UI Performance</a></li><li><a style="margin-left:0;" class="" href="docs/android-building-from-source.html">Building React Native from source</a></li></ul></div><div class="nav-docs-section"><h3>components</h3><ul><li><a style="margin-left:0;" class="" href="docs/activityindicatorios.html">ActivityIndicatorIOS</a></li><li><a style="margin-left:0;" class="" href="docs/datepickerios.html">DatePickerIOS</a></li><li><a style="margin-left:0;" class="" href="docs/drawerlayoutandroid.html">DrawerLayoutAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/image.html">Image</a></li><li><a style="margin-left:0;" class="" href="docs/listview.html">ListView</a></li><li><a style="margin-left:0;" class="" href="docs/mapview.html">MapView</a></li><li><a style="margin-left:0;" class="" href="docs/modal.html">Modal</a></li><li><a style="margin-left:0;" class="" href="docs/navigator.html">Navigator</a></li><li><a style="margin-left:0;" class="" href="docs/navigatorios.html">NavigatorIOS</a></li><li><a style="margin-left:0;" class="active" href="docs/pickerios.html">PickerIOS</a></li><li><a style="margin-left:0;" class="" href="docs/picker.html">Picker</a></li><li><a style="margin-left:0;" class="" href="docs/progressbarandroid.html">ProgressBarAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/progressviewios.html">ProgressViewIOS</a></li><li><a style="margin-left:0;" class="" href="docs/refreshcontrol.html">RefreshControl</a></li><li><a style="margin-left:0;" class="" href="docs/scrollview.html">ScrollView</a></li><li><a style="margin-left:0;" class="" href="docs/segmentedcontrolios.html">SegmentedControlIOS</a></li><li><a style="margin-left:0;" class="" href="docs/slider.html">Slider</a></li><li><a style="margin-left:0;" class="" href="docs/sliderios.html">SliderIOS</a></li><li><a style="margin-left:0;" class="" href="docs/statusbar.html">StatusBar</a></li><li><a style="margin-left:0;" class="" href="docs/switch.html">Switch</a></li><li><a style="margin-left:0;" class="" href="docs/tabbarios.html">TabBarIOS</a></li><li><a style="margin-left:0;" class="" href="docs/tabbarios-item.html">TabBarIOS.Item</a></li><li><a style="margin-left:0;" class="" href="docs/text.html">Text</a></li><li><a style="margin-left:0;" class="" href="docs/textinput.html">TextInput</a></li><li><a style="margin-left:0;" class="" href="docs/toolbarandroid.html">ToolbarAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/touchablehighlight.html">TouchableHighlight</a></li><li><a style="margin-left:0;" class="" href="docs/touchablenativefeedback.html">TouchableNativeFeedback</a></li><li><a style="margin-left:0;" class="" href="docs/touchableopacity.html">TouchableOpacity</a></li><li><a style="margin-left:0;" class="" href="docs/touchablewithoutfeedback.html">TouchableWithoutFeedback</a></li><li><a style="margin-left:0;" class="" href="docs/view.html">View</a></li><li><a style="margin-left:0;" class="" href="docs/viewpagerandroid.html">ViewPagerAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/webview.html">WebView</a></li></ul></div><div class="nav-docs-section"><h3>apis</h3><ul><li><a style="margin-left:0;" class="" href="docs/actionsheetios.html">ActionSheetIOS</a></li><li><a style="margin-left:0;" class="" href="docs/alert.html">Alert</a></li><li><a style="margin-left:0;" class="" href="docs/alertios.html">AlertIOS</a></li><li><a style="margin-left:0;" class="" href="docs/animated.html">Animated</a></li><li><a style="margin-left:0;" class="" href="docs/appregistry.html">AppRegistry</a></li><li><a style="margin-left:0;" class="" href="docs/appstateios.html">AppStateIOS</a></li><li><a style="margin-left:0;" class="" href="docs/appstate.html">AppState</a></li><li><a style="margin-left:0;" class="" href="docs/asyncstorage.html">AsyncStorage</a></li><li><a style="margin-left:0;" class="" href="docs/backandroid.html">BackAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/cameraroll.html">CameraRoll</a></li><li><a style="margin-left:0;" class="" href="docs/clipboard.html">Clipboard</a></li><li><a style="margin-left:0;" class="" href="docs/datepickerandroid.html">DatePickerAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/dimensions.html">Dimensions</a></li><li><a style="margin-left:0;" class="" href="docs/intentandroid.html">IntentAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/interactionmanager.html">InteractionManager</a></li><li><a style="margin-left:0;" class="" href="docs/layoutanimation.html">LayoutAnimation</a></li><li><a style="margin-left:0;" class="" href="docs/linking.html">Linking</a></li><li><a style="margin-left:0;" class="" href="docs/linkingios.html">LinkingIOS</a></li><li><a style="margin-left:0;" class="" href="docs/nativemethodsmixin.html">NativeMethodsMixin</a></li><li><a style="margin-left:0;" class="" href="docs/netinfo.html">NetInfo</a></li><li><a style="margin-left:0;" class="" href="docs/panresponder.html">PanResponder</a></li><li><a style="margin-left:0;" class="" href="docs/pixelratio.html">PixelRatio</a></li><li><a style="margin-left:0;" class="" href="docs/pushnotificationios.html">PushNotificationIOS</a></li><li><a style="margin-left:0;" class="" href="docs/statusbarios.html">StatusBarIOS</a></li><li><a style="margin-left:0;" class="" href="docs/stylesheet.html">StyleSheet</a></li><li><a style="margin-left:0;" class="" href="docs/timepickerandroid.html">TimePickerAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/toastandroid.html">ToastAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/vibrationios.html">VibrationIOS</a></li><li><a style="margin-left:0;" class="" href="docs/vibration.html">Vibration</a></li></ul></div><div class="nav-docs-section"><h3>Polyfills</h3><ul><li><a style="margin-left:0;" class="" href="docs/flexbox.html">Flexbox</a></li><li><a style="margin-left:0;" class="" href="docs/shadowproptypesios.html">ShadowPropTypesIOS</a></li><li><a style="margin-left:0;" class="" href="docs/geolocation.html">Geolocation</a></li><li><a style="margin-left:0;" class="" href="docs/network.html">Network</a></li><li><a style="margin-left:0;" class="" href="docs/timers.html">Timers</a></li><li><a style="margin-left:0;" class="" href="docs/colors.html">Colors</a></li></ul></div></div></div><div class="inner-content"><a id="content"></a><table width="100%"><tbody><tr><td><h1><a class="anchor" name="pickerios"></a>PickerIOS <a class="hash-link" href="docs/pickerios.html#pickerios">#</a></h1></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/0.27-stable/Libraries/Components/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="docs/pickerios.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="view"></a><a href="docs/view.html#props">View props...</a> <a class="hash-link" href="docs/pickerios.html#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="docs/pickerios.html#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="docs/pickerios.html#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="docs/pickerios.html#selectedvalue">#</a></h4></div></div></div><div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/pickerios.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/0.27-stable/Examples/UIExplorer/PickerIOSExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">&#x27;use strict&#x27;</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">&#x27;react&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> ReactNative <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;react-native&#x27;</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> ReactNative<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">&#x27;AMC&#x27;</span><span class="token punctuation">,</span>
models<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">&#x27;AMX&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;Concord&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;Eagle&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;Gremlin&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;Matador&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;Pacer&#x27;</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">&#x27;Alfa-Romeo&#x27;</span><span class="token punctuation">,</span>
models<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">&#x27;159&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;4C&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;Alfasud&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;Brera&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;GTV6&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;Giulia&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;MiTo&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;Spider&#x27;</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">&#x27;Aston Martin&#x27;</span><span class="token punctuation">,</span>
models<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">&#x27;DB5&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;DB9&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;DBS&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;Rapide&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;Vanquish&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;Vantage&#x27;</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">&#x27;Audi&#x27;</span><span class="token punctuation">,</span>
models<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">&#x27;90&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;4000&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;5000&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;A3&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;A4&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;A5&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;A6&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;A7&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;A8&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;Q5&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;Q7&#x27;</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">&#x27;Austin&#x27;</span><span class="token punctuation">,</span>
models<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">&#x27;America&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;Maestro&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;Maxi&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;Mini&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;Montego&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;Princess&#x27;</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">&#x27;Borgward&#x27;</span><span class="token punctuation">,</span>
models<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">&#x27;Hansa&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;Isabella&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;P100&#x27;</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">&#x27;Buick&#x27;</span><span class="token punctuation">,</span>
models<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">&#x27;Electra&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;LaCrosse&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;LeSabre&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;Park Avenue&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;Regal&#x27;</span><span class="token punctuation">,</span>
<span class="token string">&#x27;Roadmaster&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;Skylark&#x27;</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">&#x27;Cadillac&#x27;</span><span class="token punctuation">,</span>
models<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">&#x27;Catera&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;Cimarron&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;Eldorado&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;Fleetwood&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;Sedan de Ville&#x27;</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">&#x27;Chevrolet&#x27;</span><span class="token punctuation">,</span>
models<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">&#x27;Astro&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;Aveo&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;Bel Air&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;Captiva&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;Cavalier&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;Chevelle&#x27;</span><span class="token punctuation">,</span>
<span class="token string">&#x27;Corvair&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;Corvette&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;Cruze&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;Nova&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;SS&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;Vega&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;Volt&#x27;</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">&#x27;cadillac&#x27;</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">&#x27; &#x27;</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">&#x27;_&#x27;</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">&#x27;cadillac&#x27;</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">&#x27; &#x27;</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">&#x27;red&#x27;</span><span class="token punctuation">,</span> textAlign<span class="token punctuation">:</span> <span class="token string">&#x27;left&#x27;</span><span class="token punctuation">,</span> fontWeight<span class="token punctuation">:</span> <span class="token string">&#x27;bold&#x27;</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">&#x27;&lt;PickerIOS&gt;&#x27;</span><span class="token punctuation">;</span>
exports<span class="token punctuation">.</span>description <span class="token operator">=</span> <span class="token string">&#x27;Render lists of selectable options with UIPickerView.&#x27;</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">&#x27;&lt;PickerIOS&gt;&#x27;</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">&#x27;&lt;PickerIOS&gt; with custom styling&#x27;</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><div class="docs-prevnext"><a class="docs-next" href="docs/picker.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/7vdfm9h3e6vuf4gfdm7r5rgc48?device=iphone6s&amp;scale=60&amp;autoplay=false&amp;orientation=portrait&amp;deviceColor=white&amp;params=%7B%22route%22%3A%22PickerIOS%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-41298772-2', 'facebook.github.io');
ga('send', 'pageview');
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
docsearch({
apiKey: '2c98749b4a1e588efec53b2acec13025',
indexName: 'react-native-versions',
inputSelector: '#algolia-doc-search',
algoliaOptions: { facetFilters: [ "tags:0.27" ], hitsPerPage: 5 }
});
</script><script src="js/scripts.js"></script></body></html>
Reference in New Issue View Git Blame Copy Permalink