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
1cf8d4cea341c8a914ceabfa85d5218efe1dbe21
react-native/docs/navigatorios.html
T
Travis CI 606e61cc0b update website
2016-02-05 03:04:57 +00:00

290 lines
64 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>NavigatorIOS – React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="NavigatorIOS – 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"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"><link rel="shortcut icon" href="/react-native/img/favicon.png?2"><link rel="stylesheet" href="/react-native/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="/react-native/"><img src="/react-native/img/header_logo.png">React Native</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/getting-started.html" class="active">Docs</a></li><li><a href="/react-native/support.html" class="">Support</a></li><li><a href="https://github.com/facebook/react-native/releases" class="">Releases</a></li><li><a href="http://reactnative.cc" class="">Newsletter</a></li><li><a href="/react-native/showcase.html" class="">Showcase</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-section"><h3>Quick Start</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/getting-started.html#content">Getting Started</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/android-setup.html#content">Android Setup</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/linux-windows-support.html#content">Linux and Windows Support</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tutorial.html#content">Tutorial</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/videos.html#content">Videos</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/style.html#content">Style</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/images.html#content">Images</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/gesture-responder-system.html#content">Gesture Responder System</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/animations.html#content">Animations</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/accessibility.html#content">Accessibility</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/direct-manipulation.html#content">Direct Manipulation</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/debugging.html#content">Debugging</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/testing.html#content">Testing</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/javascript-environment.html#content">JavaScript Environment</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigator-comparison.html#content">Navigator Comparison</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/known-issues.html#content">Known Issues</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/performance.html#content">Performance</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/upgrading.html#content">Upgrading</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/platform-specific-code.html#content">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="/react-native/docs/native-modules-ios.html#content">Native Modules</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/native-components-ios.html#content">Native UI Components</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/linking-libraries-ios.html#content">Linking Libraries</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/running-on-device-ios.html#content">Running On Device</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/embedded-app-ios.html#content">Integrating with Existing Apps</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/communication-ios.html#content">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="/react-native/docs/native-modules-android.html#content">Native Modules</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/native-components-android.html#content">Native UI Components</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/running-on-device-android.html#content">Running On Device</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/embedded-app-android.html#content">Integrating with Existing Apps</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/signed-apk-android.html#content">Generating Signed APK</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/android-ui-performance.html#content">Profiling Android UI Performance</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/android-building-from-source.html#content">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="/react-native/docs/activityindicatorios.html#content">ActivityIndicatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/datepickerios.html#content">DatePickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/drawerlayoutandroid.html#content">DrawerLayoutAndroid</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/image.html#content">Image</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/listview.html#content">ListView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/mapview.html#content">MapView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/modal.html#content">Modal</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigator.html#content">Navigator</a></li><li><a style="margin-left:0;" class="active" href="/react-native/docs/navigatorios.html#content">NavigatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pickerios.html#content">PickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/picker.html#content">Picker</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/progressbarandroid.html#content">ProgressBarAndroid</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/progressviewios.html#content">ProgressViewIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pulltorefreshviewandroid.html#content">PullToRefreshViewAndroid</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/refreshcontrol.html#content">RefreshControl</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/scrollview.html#content">ScrollView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/segmentedcontrolios.html#content">SegmentedControlIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/sliderios.html#content">SliderIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/statusbar.html#content">StatusBar</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/switch.html#content">Switch</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tabbarios.html#content">TabBarIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tabbarios-item.html#content">TabBarIOS.Item</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/text.html#content">Text</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/textinput.html#content">TextInput</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/toolbarandroid.html#content">ToolbarAndroid</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablehighlight.html#content">TouchableHighlight</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablenativefeedback.html#content">TouchableNativeFeedback</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchableopacity.html#content">TouchableOpacity</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablewithoutfeedback.html#content">TouchableWithoutFeedback</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/view.html#content">View</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/viewpagerandroid.html#content">ViewPagerAndroid</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/webview.html#content">WebView</a></li></ul></div><div class="nav-docs-section"><h3>apis</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/actionsheetios.html#content">ActionSheetIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/alert.html#content">Alert</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/alertios.html#content">AlertIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/animated.html#content">Animated</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/appregistry.html#content">AppRegistry</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/appstateios.html#content">AppStateIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/appstate.html#content">AppState</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/asyncstorage.html#content">AsyncStorage</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/backandroid.html#content">BackAndroid</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/cameraroll.html#content">CameraRoll</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/dimensions.html#content">Dimensions</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/intentandroid.html#content">IntentAndroid</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/interactionmanager.html#content">InteractionManager</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/layoutanimation.html#content">LayoutAnimation</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/linking.html#content">Linking</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/linkingios.html#content">LinkingIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/nativemethodsmixin.html#content">NativeMethodsMixin</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/netinfo.html#content">NetInfo</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/panresponder.html#content">PanResponder</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pixelratio.html#content">PixelRatio</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pushnotificationios.html#content">PushNotificationIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/statusbarios.html#content">StatusBarIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/stylesheet.html#content">StyleSheet</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/toastandroid.html#content">ToastAndroid</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/vibrationios.html#content">VibrationIOS</a></li></ul></div><div class="nav-docs-section"><h3>Polyfills</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/flexbox.html#content">Flexbox</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/shadowproptypesios.html#content">ShadowPropTypesIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/geolocation.html#content">Geolocation</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/network.html#content">Network</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/timers.html#content">Timers</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/colors.html#content">Colors</a></li></ul></div></div><div class="inner-content"><a id="content"></a><table width="100%"><tbody><tr><td><h1><a class="anchor" name="navigatorios"></a>NavigatorIOS <a class="hash-link" href="#navigatorios">#</a></h1></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Libraries/Components/Navigation/NavigatorIOS.ios.js">Edit on GitHub</a></td></tr></tbody></table><div><div><p>NavigatorIOS wraps UIKit navigation and allows you to add back-swipe
functionality across your app.</p><blockquote><p><strong>NOTE</strong>: This Component is not maintained by Facebook</p><p>This component is under community responsibility.
If a pure JavaScript solution fits your needs you may try the <code>Navigator</code>
component instead.</p></blockquote><h4><a class="anchor" name="routes"></a>Routes <a class="hash-link" href="#routes">#</a></h4><p>A route is an object used to describe each page in the navigator. The first
route is provided to NavigatorIOS as <code>initialRoute</code>:</p><div class="prism language-javascript">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">return</span> <span class="token punctuation">(</span>
&lt;NavigatorIOS
initialRoute<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
component<span class="token punctuation">:</span> MyView<span class="token punctuation">,</span>
title<span class="token punctuation">:</span> <span class="token string">&#x27;My View Title&#x27;</span><span class="token punctuation">,</span>
passProps<span class="token punctuation">:</span> <span class="token punctuation">{</span> myProp<span class="token punctuation">:</span> <span class="token string">&#x27;foo&#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 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></div><p>Now MyView will be rendered by the navigator. It will receive the route
object in the <code>route</code> prop, a navigator, and all of the props specified in
<code>passProps</code>.</p><p>See the initialRoute propType for a complete definition of a route.</p><h4><a class="anchor" name="navigator"></a>Navigator <a class="hash-link" href="#navigator">#</a></h4><p>A <code>navigator</code> is an object of navigation functions that a view can call. It
is passed as a prop to any component rendered by NavigatorIOS.</p><div class="prism language-javascript"><span class="token keyword">var</span> MyView <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>
_handleBackButtonPress<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">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>navigator<span class="token punctuation">.</span><span class="token function">pop<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
_handleNextButtonPress<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">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>navigator<span class="token punctuation">.</span><span class="token function">push<span class="token punctuation">(</span></span>nextRoute<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 punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div><p>A navigation object contains the following functions:</p><ul><li><code>push(route)</code> - Navigate forward to a new route</li><li><code>pop()</code> - Go back one page</li><li><code>popN(n)</code> - Go back N pages at once. When N=1, behavior matches <code>pop()</code></li><li><code>replace(route)</code> - Replace the route for the current page and immediately
load the view for the new route</li><li><code>replacePrevious(route)</code> - Replace the route/view for the previous page</li><li><code>replacePreviousAndPop(route)</code> - Replaces the previous route/view and
transitions back to it</li><li><code>resetTo(route)</code> - Replaces the top item and popToTop</li><li><code>popToRoute(route)</code> - Go back to the item for a particular route object</li><li><code>popToTop()</code> - Go back to the top item</li></ul><p>Navigator functions are also available on the NavigatorIOS component:</p><div class="prism language-javascript"><span class="token keyword">var</span> MyView <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>
_handleNavigationRequest<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">this</span><span class="token punctuation">.</span>refs<span class="token punctuation">.</span>nav<span class="token punctuation">.</span><span class="token function">push<span class="token punctuation">(</span></span>otherRoute<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 punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">(</span>
&lt;NavigatorIOS
ref<span class="token operator">=</span><span class="token string">&quot;nav&quot;</span>
initialRoute<span class="token operator">=</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 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></div><p>Props passed to the NavigatorIOS component will set the default configuration
for the navigation bar. Props passed as properties to a route object will set
the configuration for that route&#x27;s navigation bar, overriding any props
passed to the NavigatorIOS component.</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="bartintcolor"></a>barTintColor <span class="propType">string</span> <a class="hash-link" href="#bartintcolor">#</a></h4><div><p>The default background color of the navigation bar</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="initialroute"></a>initialRoute <span class="propType">{component: function, title: string, passProps: object, backButtonIcon: Image.propTypes.source, backButtonTitle: string, leftButtonIcon: Image.propTypes.source, leftButtonTitle: string, onLeftButtonPress: function, rightButtonIcon: Image.propTypes.source, rightButtonTitle: string, onRightButtonPress: function, wrapperStyle: [object Object], navigationBarHidden: bool, shadowHidden: bool, tintColor: string, barTintColor: string, titleTextColor: string, translucent: bool}</span> <a class="hash-link" href="#initialroute">#</a></h4><div><p>NavigatorIOS uses &quot;route&quot; objects to identify child views, their props,
and navigation bar configuration. &quot;push&quot; and all the other navigation
operations expect routes to be like this:</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="itemwrapperstyle"></a>itemWrapperStyle <span class="propType"><a href="view.html#style">View#style</a></span> <a class="hash-link" href="#itemwrapperstyle">#</a></h4><div><p>The default wrapper style for components in the navigator.
A common use case is to set the backgroundColor for every page</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="navigationbarhidden"></a>navigationBarHidden <span class="propType">bool</span> <a class="hash-link" href="#navigationbarhidden">#</a></h4><div><p>A Boolean value that indicates whether the navigation bar is hidden by default</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="shadowhidden"></a>shadowHidden <span class="propType">bool</span> <a class="hash-link" href="#shadowhidden">#</a></h4><div><p>A Boolean value that indicates whether to hide the 1px hairline shadow by default</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="tintcolor"></a>tintColor <span class="propType">string</span> <a class="hash-link" href="#tintcolor">#</a></h4><div><p>The default color used for buttons in the navigation bar</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="titletextcolor"></a>titleTextColor <span class="propType">string</span> <a class="hash-link" href="#titletextcolor">#</a></h4><div><p>The default text color of the navigation bar title</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="translucent"></a>translucent <span class="propType">bool</span> <a class="hash-link" href="#translucent">#</a></h4><div><p>A Boolean value that indicates whether the navigation bar is translucent by default</p></div></div></div></div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/NavigatorIOSExample.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-native&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> ViewExample <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;./ViewExample&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> createExamplePage <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;./createExamplePage&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> <span class="token punctuation">{</span>
AlertIOS<span class="token punctuation">,</span>
ScrollView<span class="token punctuation">,</span>
StyleSheet<span class="token punctuation">,</span>
Text<span class="token punctuation">,</span>
TouchableHighlight<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> EmptyPage <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>
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">return</span> <span class="token punctuation">(</span>
&lt;View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>emptyPage<span class="token punctuation">}</span><span class="token operator">&gt;</span>
&lt;Text style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>emptyPageText<span class="token punctuation">}</span><span class="token operator">&gt;</span>
<span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>text<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> NavigatorIOSExample <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>
statics<span class="token punctuation">:</span> <span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">&#x27;&lt;NavigatorIOS&gt;&#x27;</span><span class="token punctuation">,</span>
description<span class="token punctuation">:</span> <span class="token string">&#x27;iOS navigation capabilities&#x27;</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> recurseTitle <span class="token operator">=</span> <span class="token string">&#x27;Recurse Navigation&#x27;</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>topExampleRoute<span class="token punctuation">)</span> <span class="token punctuation">{</span>
recurseTitle <span class="token operator">+</span><span class="token operator">=</span> <span class="token string">&#x27; - more examples here&#x27;</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
&lt;ScrollView style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>list<span class="token punctuation">}</span><span class="token operator">&gt;</span>
&lt;View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>line<span class="token punctuation">}</span><span class="token operator">/</span><span class="token operator">&gt;</span>
&lt;View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>group<span class="token punctuation">}</span><span class="token operator">&gt;</span>
&lt;View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>row<span class="token punctuation">}</span><span class="token operator">&gt;</span>
&lt;Text style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>rowNote<span class="token punctuation">}</span><span class="token operator">&gt;</span>
See <span class="token operator">&amp;lt;</span>UIExplorerApp<span class="token ignore">&amp;gt;</span> <span class="token keyword">for</span> top<span class="token operator">-</span>level usage<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>
&lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span>
&lt;View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>line<span class="token punctuation">}</span><span class="token operator">/</span><span class="token operator">&gt;</span>
&lt;View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>groupSpace<span class="token punctuation">}</span><span class="token operator">/</span><span class="token operator">&gt;</span>
&lt;View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>line<span class="token punctuation">}</span><span class="token operator">/</span><span class="token operator">&gt;</span>
&lt;View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>group<span class="token punctuation">}</span><span class="token operator">&gt;</span>
<span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">_renderRow<span class="token punctuation">(</span></span>recurseTitle<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>navigator<span class="token punctuation">.</span><span class="token function">push<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
title<span class="token punctuation">:</span> NavigatorIOSExample<span class="token punctuation">.</span>title<span class="token punctuation">,</span>
component<span class="token punctuation">:</span> NavigatorIOSExample<span class="token punctuation">,</span>
backButtonTitle<span class="token punctuation">:</span> <span class="token string">&#x27;Custom Back&#x27;</span><span class="token punctuation">,</span>
passProps<span class="token punctuation">:</span> <span class="token punctuation">{</span>topExampleRoute<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>topExampleRoute <span class="token operator">||</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>route<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 punctuation">}</span>
<span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">_renderRow<span class="token punctuation">(</span></span><span class="token string">&#x27;Push View Example&#x27;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>navigator<span class="token punctuation">.</span><span class="token function">push<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">&#x27;Very Long Custom View Example Title&#x27;</span><span class="token punctuation">,</span>
component<span class="token punctuation">:</span> <span class="token function">createExamplePage<span class="token punctuation">(</span></span><span class="token keyword">null</span><span class="token punctuation">,</span> ViewExample<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 punctuation">}</span>
<span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">_renderRow<span class="token punctuation">(</span></span><span class="token string">&#x27;Custom Right Button&#x27;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>navigator<span class="token punctuation">.</span><span class="token function">push<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
title<span class="token punctuation">:</span> NavigatorIOSExample<span class="token punctuation">.</span>title<span class="token punctuation">,</span>
component<span class="token punctuation">:</span> EmptyPage<span class="token punctuation">,</span>
rightButtonTitle<span class="token punctuation">:</span> <span class="token string">&#x27;Cancel&#x27;</span><span class="token punctuation">,</span>
onRightButtonPress<span class="token punctuation">:</span> <span class="token punctuation">(</span><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>props<span class="token punctuation">.</span>navigator<span class="token punctuation">.</span><span class="token function">pop<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
passProps<span class="token punctuation">:</span> <span class="token punctuation">{</span>
text<span class="token punctuation">:</span> <span class="token string">&#x27;This page has a right button in the nav bar&#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 punctuation">)</span><span class="token punctuation">}</span>
<span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">_renderRow<span class="token punctuation">(</span></span><span class="token string">&#x27;Custom Left &amp; Right Icons&#x27;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>navigator<span class="token punctuation">.</span><span class="token function">push<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
title<span class="token punctuation">:</span> NavigatorIOSExample<span class="token punctuation">.</span>title<span class="token punctuation">,</span>
component<span class="token punctuation">:</span> EmptyPage<span class="token punctuation">,</span>
leftButtonTitle<span class="token punctuation">:</span> <span class="token string">&#x27;Custom Left&#x27;</span><span class="token punctuation">,</span>
onLeftButtonPress<span class="token punctuation">:</span> <span class="token punctuation">(</span><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>props<span class="token punctuation">.</span>navigator<span class="token punctuation">.</span><span class="token function">pop<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
rightButtonIcon<span class="token punctuation">:</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;image!NavBarButtonPlus&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
onRightButtonPress<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
AlertIOS<span class="token punctuation">.</span><span class="token function">alert<span class="token punctuation">(</span></span>
<span class="token string">&#x27;Bar Button Action&#x27;</span><span class="token punctuation">,</span>
<span class="token string">&#x27;Recognized a tap on the bar button icon&#x27;</span><span class="token punctuation">,</span>
<span class="token punctuation">[</span>
<span class="token punctuation">{</span>
text<span class="token punctuation">:</span> <span class="token string">&#x27;OK&#x27;</span><span class="token punctuation">,</span>
onPress<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span><span class="token string">&#x27;Tapped OK&#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 punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
passProps<span class="token punctuation">:</span> <span class="token punctuation">{</span>
text<span class="token punctuation">:</span> <span class="token string">&#x27;This page has an icon for the right button in the nav bar&#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 punctuation">)</span><span class="token punctuation">}</span>
<span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">_renderRow<span class="token punctuation">(</span></span><span class="token string">&#x27;Pop&#x27;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>navigator<span class="token punctuation">.</span><span class="token function">pop<span class="token punctuation">(</span></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">this</span><span class="token punctuation">.</span><span class="token function">_renderRow<span class="token punctuation">(</span></span><span class="token string">&#x27;Pop to top&#x27;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>navigator<span class="token punctuation">.</span><span class="token function">popToTop<span class="token punctuation">(</span></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">this</span><span class="token punctuation">.</span><span class="token function">_renderRow<span class="token punctuation">(</span></span><span class="token string">&#x27;Replace here&#x27;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
<span class="token keyword">var</span> prevRoute <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>route<span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>navigator<span class="token punctuation">.</span><span class="token function">replace<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">&#x27;New Navigation&#x27;</span><span class="token punctuation">,</span>
component<span class="token punctuation">:</span> EmptyPage<span class="token punctuation">,</span>
rightButtonTitle<span class="token punctuation">:</span> <span class="token string">&#x27;Undo&#x27;</span><span class="token punctuation">,</span>
onRightButtonPress<span class="token punctuation">:</span> <span class="token punctuation">(</span><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>props<span class="token punctuation">.</span>navigator<span class="token punctuation">.</span><span class="token function">replace<span class="token punctuation">(</span></span>prevRoute<span class="token punctuation">)</span><span class="token punctuation">,</span>
passProps<span class="token punctuation">:</span> <span class="token punctuation">{</span>
text<span class="token punctuation">:</span> <span class="token string">&#x27;The component is replaced, but there is currently no &#x27;</span> <span class="token operator">+</span>
<span class="token string">&#x27;way to change the right button or title of the current route&#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 punctuation">)</span><span class="token punctuation">}</span>
<span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">_renderReplacePrevious<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">}</span>
<span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">_renderReplacePreviousAndPop<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">}</span>
<span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">_renderPopToTopNavExample<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">}</span>
&lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span>
&lt;View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>line<span class="token punctuation">}</span><span class="token operator">/</span><span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>ScrollView<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>
_renderPopToTopNavExample<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">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>topExampleRoute<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">_renderRow<span class="token punctuation">(</span></span><span class="token string">&#x27;Pop to top NavigatorIOSExample&#x27;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>navigator<span class="token punctuation">.</span><span class="token function">popToRoute<span class="token punctuation">(</span></span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>topExampleRoute<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>
_renderReplacePrevious<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">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>topExampleRoute<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment" spellcheck="true"> // this is to avoid replacing the UIExplorerList at the top of the stack
</span> <span class="token keyword">return</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">_renderRow<span class="token punctuation">(</span></span><span class="token string">&#x27;Replace previous&#x27;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>navigator<span class="token punctuation">.</span><span class="token function">replacePrevious<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">&#x27;Replaced&#x27;</span><span class="token punctuation">,</span>
component<span class="token punctuation">:</span> EmptyPage<span class="token punctuation">,</span>
passProps<span class="token punctuation">:</span> <span class="token punctuation">{</span>
text<span class="token punctuation">:</span> <span class="token string">&#x27;This is a replaced &quot;previous&quot; page&#x27;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
wrapperStyle<span class="token punctuation">:</span> styles<span class="token punctuation">.</span>customWrapperStyle<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 punctuation">}</span><span class="token punctuation">,</span>
_renderReplacePreviousAndPop<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">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>topExampleRoute<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment" spellcheck="true"> // this is to avoid replacing the UIExplorerList at the top of the stack
</span> <span class="token keyword">return</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">_renderRow<span class="token punctuation">(</span></span><span class="token string">&#x27;Replace previous and pop&#x27;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>navigator<span class="token punctuation">.</span><span class="token function">replacePreviousAndPop<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">&#x27;Replaced and Popped&#x27;</span><span class="token punctuation">,</span>
component<span class="token punctuation">:</span> EmptyPage<span class="token punctuation">,</span>
passProps<span class="token punctuation">:</span> <span class="token punctuation">{</span>
text<span class="token punctuation">:</span> <span class="token string">&#x27;This is a replaced &quot;previous&quot; page&#x27;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
wrapperStyle<span class="token punctuation">:</span> styles<span class="token punctuation">.</span>customWrapperStyle<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 punctuation">}</span><span class="token punctuation">,</span>
_renderRow<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>title<span class="token punctuation">:</span> string<span class="token punctuation">,</span> onPress<span class="token punctuation">:</span> Function<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;TouchableHighlight onPress<span class="token operator">=</span><span class="token punctuation">{</span>onPress<span class="token punctuation">}</span><span class="token operator">&gt;</span>
&lt;View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>row<span class="token punctuation">}</span><span class="token operator">&gt;</span>
&lt;Text style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>rowText<span class="token punctuation">}</span><span class="token operator">&gt;</span>
<span class="token punctuation">{</span>title<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>
&lt;<span class="token operator">/</span>TouchableHighlight<span class="token operator">&gt;</span>
&lt;View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>separator<span class="token punctuation">}</span> <span class="token operator">/</span><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> styles <span class="token operator">=</span> StyleSheet<span class="token punctuation">.</span><span class="token function">create<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
customWrapperStyle<span class="token punctuation">:</span> <span class="token punctuation">{</span>
backgroundColor<span class="token punctuation">:</span> <span class="token string">&#x27;#bbdddd&#x27;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
emptyPage<span class="token punctuation">:</span> <span class="token punctuation">{</span>
flex<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
paddingTop<span class="token punctuation">:</span> <span class="token number">64</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
emptyPageText<span class="token punctuation">:</span> <span class="token punctuation">{</span>
margin<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
list<span class="token punctuation">:</span> <span class="token punctuation">{</span>
backgroundColor<span class="token punctuation">:</span> <span class="token string">&#x27;#eeeeee&#x27;</span><span class="token punctuation">,</span>
marginTop<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
group<span class="token punctuation">:</span> <span class="token punctuation">{</span>
backgroundColor<span class="token punctuation">:</span> <span class="token string">&#x27;white&#x27;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
groupSpace<span class="token punctuation">:</span> <span class="token punctuation">{</span>
height<span class="token punctuation">:</span> <span class="token number">15</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
line<span class="token punctuation">:</span> <span class="token punctuation">{</span>
backgroundColor<span class="token punctuation">:</span> <span class="token string">&#x27;#bbbbbb&#x27;</span><span class="token punctuation">,</span>
height<span class="token punctuation">:</span> StyleSheet<span class="token punctuation">.</span>hairlineWidth<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
row<span class="token punctuation">:</span> <span class="token punctuation">{</span>
backgroundColor<span class="token punctuation">:</span> <span class="token string">&#x27;white&#x27;</span><span class="token punctuation">,</span>
justifyContent<span class="token punctuation">:</span> <span class="token string">&#x27;center&#x27;</span><span class="token punctuation">,</span>
paddingHorizontal<span class="token punctuation">:</span> <span class="token number">15</span><span class="token punctuation">,</span>
paddingVertical<span class="token punctuation">:</span> <span class="token number">15</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
separator<span class="token punctuation">:</span> <span class="token punctuation">{</span>
height<span class="token punctuation">:</span> StyleSheet<span class="token punctuation">.</span>hairlineWidth<span class="token punctuation">,</span>
backgroundColor<span class="token punctuation">:</span> <span class="token string">&#x27;#bbbbbb&#x27;</span><span class="token punctuation">,</span>
marginLeft<span class="token punctuation">:</span> <span class="token number">15</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
rowNote<span class="token punctuation">:</span> <span class="token punctuation">{</span>
fontSize<span class="token punctuation">:</span> <span class="token number">17</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
rowText<span class="token punctuation">:</span> <span class="token punctuation">{</span>
fontSize<span class="token punctuation">:</span> <span class="token number">17</span><span class="token punctuation">,</span>
fontWeight<span class="token punctuation">:</span> <span class="token string">&#x27;500&#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>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> NavigatorIOSExample<span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="pickerios.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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");
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script src="/react-native/js/scripts.js"></script></body></html>
Reference in New Issue View Git Blame Copy Permalink