mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Website Deployment Script
237 lines
58 KiB
HTML
237 lines
58 KiB
HTML
<!DOCTYPE html><html><head><title>Navigation</title><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width"><meta property="fb:app_id" content="1677033832619985"><meta property="fb:admins" content="121800083"><meta property="og:site_name" content="React Native"><meta property="og:title" content="Navigation"><meta property="og:url" content="https://facebook.github.io/react-native/index.html"><meta property="og:image" content="https://facebook.github.io/react-native/img/opengraph.png"><meta property="og:description" content="A framework for building native apps using React"><meta name="twitter:site" content="@reactnative"><meta name="twitter:card" content="summary_large_image"><meta property="og:type" content="website"><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"><link rel="alternate" type="application/rss+xml" title="React Native Blog" href="https://facebook.github.io/react-native/blog/feed.xml"><link href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css" rel="stylesheet" type="text/css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><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.40</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="/react-native/support.html" class="">Help</a></li><li><a href="/react-native/showcase.html" class="">Showcase</a></li><li><a href="/react-native/blog/" class="">Blog</a></li></ul><div class="algolia-search-wrapper"><input id="algolia-doc-search" tabindex="0" 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>The Basics</h3><ul><li><a style="margin-left:0;" class="" href="docs/getting-started.html">Getting Started</a></li><li><a style="margin-left:0;" class="" href="docs/tutorial.html">Tutorial</a></li><li><a style="margin-left:0;" class="" href="docs/props.html">Props</a></li><li><a style="margin-left:0;" class="" href="docs/state.html">State</a></li><li><a style="margin-left:0;" class="" href="docs/style.html">Style</a></li><li><a style="margin-left:0;" class="" href="docs/height-and-width.html">Height and Width</a></li><li><a style="margin-left:0;" class="" href="docs/flexbox.html">Layout with Flexbox</a></li><li><a style="margin-left:0;" class="" href="docs/handling-text-input.html">Handling Text Input</a></li><li><a style="margin-left:0;" class="" href="docs/using-a-scrollview.html">Using a ScrollView</a></li><li><a style="margin-left:0;" class="" href="docs/using-a-listview.html">Using a ListView</a></li><li><a style="margin-left:0;" class="" href="docs/network.html">Networking</a></li><li><a style="margin-left:0;" class="" href="docs/using-navigators.html">Using Navigators</a></li><li><a style="margin-left:0;" class="" href="docs/more-resources.html">More Resources</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="docs/integration-with-existing-apps.html">Integration With Existing Apps</a></li><li><a style="margin-left:0;" class="" href="docs/colors.html">Colors</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/handling-touches.html">Handling Touches</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/timers.html">Timers</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/running-on-device.html">Running On Device</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="active" href="docs/navigation.html">Navigation</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/understanding-cli.html">Understanding the CLI</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><li><a style="margin-left:0;" class="" href="docs/gesture-responder-system.html">Gesture Responder System</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-simulator-ios.html">Running On Simulator</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/headless-js-android.html">Headless JS</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/activityindicator.html">ActivityIndicator</a></li><li><a style="margin-left:0;" class="" href="docs/button.html">Button</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/keyboardavoidingview.html">KeyboardAvoidingView</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="" href="docs/picker.html">Picker</a></li><li><a style="margin-left:0;" class="" href="docs/pickerios.html">PickerIOS</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/snapshotviewios.html">SnapshotViewIOS</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/adsupportios.html">AdSupportIOS</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/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/easing.html">Easing</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/imageeditor.html">ImageEditor</a></li><li><a style="margin-left:0;" class="" href="docs/imagepickerios.html">ImagePickerIOS</a></li><li><a style="margin-left:0;" class="" href="docs/imagestore.html">ImageStore</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/keyboard.html">Keyboard</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/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/permissionsandroid.html">PermissionsAndroid</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/settings.html">Settings</a></li><li><a style="margin-left:0;" class="" href="docs/share.html">Share</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/systrace.html">Systrace</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/vibration.html">Vibration</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/layout-props.html">Layout Props</a></li><li><a style="margin-left:0;" class="" href="docs/shadow-props.html">Shadow Props</a></li></ul></div></div></div><div class="inner-content"><a id="content"></a><h1><a class="anchor" name="navigation"></a>Navigation <a class="hash-link" href="docs/navigation.html#navigation">#</a></h1><div><p>This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use <code>Navigator</code>. If you are only targeting iOS and would like to stick to the native look and feel, check out <code>NavigatorIOS</code>. If you are looking for greater control over your navigation stack, you can't go wrong with <code>NavigationExperimental</code>.</p><h2><a class="anchor" name="navigator"></a>Navigator <a class="hash-link" href="docs/navigation.html#navigator">#</a></h2><p><code>Navigator</code> provides a JavaScript implementation of a navigation stack, so it works on both iOS and Android and is easy to customize. This is the same component you used to build your first navigation stack in the <a href="docs/using-navigators.html" target="_blank">navigators tutorial</a>.</p><p><img src="img/NavigationStack-Navigator.gif" alt=""></p><p><code>Navigator</code> can easily be adapted to render different components based on the current route in its <code>renderScene</code> function. It will transition new scenes onto the screen by sliding in from the right by default, but you can control this behavior by using the <code>configureScene</code> function. You can also configure a navigation bar through the <code>navigationBar</code> prop.</p><p>Check out the <a href="docs/navigator.html" target="_blank">Navigator API reference</a> for specific examples that cover each of these scenarios.</p><h2><a class="anchor" name="navigatorios"></a>NavigatorIOS <a class="hash-link" href="docs/navigation.html#navigatorios">#</a></h2><p>If you are targeting iOS only, you may also want to consider using <a href="docs/navigatorios.html" target="_blank">NavigatorIOS</a>. It looks and feels just like <a href="https://developer.apple.com/library/ios/documentation/UIKit/Reference/UINavigationController_Class/" target="_blank"><code>UINavigationController</code></a>, because it is actually built on top of it.</p><p><img src="img/NavigationStack-NavigatorIOS.gif" alt=""></p><div class="prism language-javascript"><NavigatorIOS
|
|
initialRoute<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
|
|
component<span class="token punctuation">:</span> MyScene<span class="token punctuation">,</span>
|
|
title<span class="token punctuation">:</span> <span class="token string">'My Initial Scene'</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">'foo'</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">></span></div><p>Just like <code>Navigator</code>, <code>NavigatorIOS</code> uses routes to represent scenes, with some important differences. The actual component that will be rendered can be specified using the <code>component</code> key in the route, and any props that should be passed to this component can be specified in <code>passProps</code>. A "navigator" object is automatically passed as a prop to the component, allowing you to call <code>push</code> and <code>pop</code> as needed.</p><p>As <code>NavigatorIOS</code> leverages native UIKit navigation, it will automatically render a navigation bar with a back button and title.</p><div class="prism language-javascript">import React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component<span class="token punctuation">,</span> PropTypes <span class="token punctuation">}</span> from <span class="token string">'react'</span><span class="token punctuation">;</span>
|
|
import <span class="token punctuation">{</span> NavigatorIOS<span class="token punctuation">,</span> Text<span class="token punctuation">,</span> TouchableHighlight<span class="token punctuation">,</span> View <span class="token punctuation">}</span> from <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
|
|
|
export default class <span class="token class-name">NavigatorIOSApp</span> extends <span class="token class-name">Component</span> <span class="token punctuation">{</span>
|
|
<span class="token function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
|
<NavigatorIOS
|
|
initialRoute<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
|
|
component<span class="token punctuation">:</span> MyScene<span class="token punctuation">,</span>
|
|
title<span class="token punctuation">:</span> <span class="token string">'My Initial Scene'</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">}</span>
|
|
style<span class="token operator">=</span><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><span class="token punctuation">}</span>
|
|
<span class="token operator">/</span><span class="token operator">></span>
|
|
<span class="token punctuation">)</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
|
|
class <span class="token class-name">MyScene</span> extends <span class="token class-name">Component</span> <span class="token punctuation">{</span>
|
|
static propTypes <span class="token operator">=</span> <span class="token punctuation">{</span>
|
|
title<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span>string<span class="token punctuation">.</span>isRequired<span class="token punctuation">,</span>
|
|
navigator<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span>object<span class="token punctuation">.</span>isRequired<span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span>
|
|
|
|
<span class="token function">constructor<span class="token punctuation">(</span></span>props<span class="token punctuation">,</span> context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token function">super<span class="token punctuation">(</span></span>props<span class="token punctuation">,</span> context<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">this</span><span class="token punctuation">.</span>_onForward <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_onForward<span class="token punctuation">.</span><span class="token function">bind<span class="token punctuation">(</span></span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
|
|
<span class="token function">_onForward<span class="token punctuation">(</span></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><span class="token punctuation">{</span>
|
|
title<span class="token punctuation">:</span> <span class="token string">'Scene '</span> <span class="token operator">+</span> nextIndex<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 function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
|
<View<span class="token operator">></span>
|
|
<Text<span class="token operator">></span>Current Scene<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>title <span class="token punctuation">}</span><<span class="token operator">/</span>Text<span class="token operator">></span>
|
|
<TouchableHighlight onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onForward<span class="token punctuation">}</span><span class="token operator">></span>
|
|
<Text<span class="token operator">></span>Tap me to load the next scene<<span class="token operator">/</span>Text<span class="token operator">></span>
|
|
<<span class="token operator">/</span>TouchableHighlight<span class="token operator">></span>
|
|
<<span class="token operator">/</span>View<span class="token operator">></span>
|
|
<span class="token punctuation">)</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span></div><p>Check out the <a href="docs/navigatorios.html" target="_blank"><code>NavigatorIOS</code> reference docs</a> to learn more about this component.</p><blockquote><p>You may also want to check out <a href="https://github.com/wix/react-native-navigation" target="_blank">react-native-navigation</a>, a component that aims to provide native navigation on both iOS and Android.</p></blockquote><h2><a class="anchor" name="navigationexperimental"></a>NavigationExperimental <a class="hash-link" href="docs/navigation.html#navigationexperimental">#</a></h2><p><code>Navigator</code> and <code>NavigatorIOS</code> are both stateful components. If your app has multiple of these, it can become tricky to coordinate navigation transitions between them. NavigationExperimental provides a different approach to navigation, allowing any view to act as a navigation view and using reducers to manipulate state at a top-level object. It is bleeding edge as the name implies, but you might want to check it out if you are craving greater control over your app's navigation.</p><div class="prism language-javascript"><NavigationCardStack
|
|
onNavigateBack<span class="token operator">=</span><span class="token punctuation">{</span>onPopRouteFunc<span class="token punctuation">}</span>
|
|
navigationState<span class="token operator">=</span><span class="token punctuation">{</span>myNavigationState<span class="token punctuation">}</span>
|
|
renderScene<span class="token operator">=</span><span class="token punctuation">{</span>renderSceneFun<span class="token punctuation">}</span>
|
|
<span class="token operator">/</span><span class="token operator">></span></div><p>You can import <code>NavigationExperimental</code> like any other component in React Native. Once you have that, you can deconstruct any additional components from <code>NavigationExperimental</code> that you may find useful. Since I am feeling like building navigation stacks today, I'll go ahead and pick out <code>NavigationCardStack</code> and <code>NavigationStateUtils</code>.</p><div class="prism language-javascript">import React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> from <span class="token string">'react'</span><span class="token punctuation">;</span>
|
|
import <span class="token punctuation">{</span> NavigationExperimental <span class="token punctuation">}</span> from <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
|
|
|
const <span class="token punctuation">{</span>
|
|
CardStack<span class="token punctuation">:</span> NavigationCardStack<span class="token punctuation">,</span>
|
|
StateUtils<span class="token punctuation">:</span> NavigationStateUtils<span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span> <span class="token operator">=</span> NavigationExperimental<span class="token punctuation">;</span></div><p>As I said earlier, <code>NavigationExperimental</code> takes a different approach than <code>Navigator</code> and <code>NavigatorIOS</code>. Using it to build a navigation stack requires a few more steps than the stateful components, but the payoff is worth it.</p><h3><a class="anchor" name="step-1-define-initial-state-and-top-level-component"></a>Step 1. Define Initial State and Top Level Component <a class="hash-link" href="docs/navigation.html#step-1-define-initial-state-and-top-level-component">#</a></h3><p>Create a new component for your application. This will be the top-level object, so we will define the initial state here. The navigation state will be defined in the <code>navigationState</code> key, where we define our initial route:</p><div class="prism language-javascript">class <span class="token class-name">BleedingEdgeApplication</span> extends <span class="token class-name">Component</span> <span class="token punctuation">{</span>
|
|
<span class="token function">constructor<span class="token punctuation">(</span></span>props<span class="token punctuation">,</span> context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token function">super<span class="token punctuation">(</span></span>props<span class="token punctuation">,</span> context<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token keyword">this</span><span class="token punctuation">.</span>state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
|
<span class="token comment" spellcheck="true"> // This defines the initial navigation state.
|
|
</span> navigationState<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
|
index<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span><span class="token comment" spellcheck="true"> // Starts with first route focused.
|
|
</span> routes<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>key<span class="token punctuation">:</span> <span class="token string">'My Initial Scene'</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token comment" spellcheck="true"> // Starts with only one route.
|
|
</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment" spellcheck="true"> // We'll define this function later - hang on
|
|
</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_onNavigationChange <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_onNavigationChange<span class="token punctuation">.</span><span class="token function">bind<span class="token punctuation">(</span></span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
|
|
<span class="token function">_onNavigationChange<span class="token punctuation">(</span></span>type<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token comment" spellcheck="true"> // It's literally the next step. We'll get to it!
|
|
</span> <span class="token punctuation">}</span>
|
|
|
|
<span class="token function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
|
<Text<span class="token operator">></span>This is a placeholder<span class="token punctuation">.</span> We will come back to <span class="token keyword">this</span> and render our navigation here later<span class="token punctuation">.</span><<span class="token operator">/</span>Text<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></div><p>Alright, now we have a simple stateful component that doesn't do much at all. We can change that. Our initial state contains one route, and the current index. That looks suspiciously just like our initial route definition in Navigator. Do you remember which actions its navigator object provided?</p><p>Push and pop, of course. That seems pretty straightforward to implement. I promised you earlier we would be using reducers to manage state at the top-level object. Sit tight.</p><h3><a class="anchor" name="step-2-reducing-the-navigation-state"></a>Step 2. Reducing the Navigation State <a class="hash-link" href="docs/navigation.html#step-2-reducing-the-navigation-state">#</a></h3><p>NavigationExperimental comes built-in with a some useful reducers, and they are all available as part of NavigationStateUtils. The two we will be using right now are called -- yep -- push and pop. They take a navigationState object, and return a new navigationState object.</p><p>We can use them to write our <code>_onNavigationChange</code> function which, given a "push" or "pop" action, will reduce the state accordingly.</p><div class="prism language-javascript"><span class="token function">_onNavigationChange<span class="token punctuation">(</span></span>type<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token comment" spellcheck="true"> // Extract the navigationState from the current state:
|
|
</span> <span class="token keyword">let</span> <span class="token punctuation">{</span>navigationState<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">;</span>
|
|
|
|
switch <span class="token punctuation">(</span>type<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
case <span class="token string">'push'</span><span class="token punctuation">:</span>
|
|
<span class="token comment" spellcheck="true"> // Push a new route, which in our case is an object with a key value.
|
|
</span> <span class="token comment" spellcheck="true"> // I am fond of cryptic keys (but seriously, keys should be unique)
|
|
</span> const route <span class="token operator">=</span> <span class="token punctuation">{</span>key<span class="token punctuation">:</span> <span class="token string">'Route-'</span> <span class="token operator">+</span> Date<span class="token punctuation">.</span><span class="token function">now<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment" spellcheck="true"> // Use the push reducer provided by NavigationStateUtils
|
|
</span> navigationState <span class="token operator">=</span> NavigationStateUtils<span class="token punctuation">.</span><span class="token function">push<span class="token punctuation">(</span></span>navigationState<span class="token punctuation">,</span> route<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">break</span><span class="token punctuation">;</span>
|
|
|
|
case <span class="token string">'pop'</span><span class="token punctuation">:</span>
|
|
<span class="token comment" spellcheck="true"> // Pop the current route using the pop reducer.
|
|
</span> navigationState <span class="token operator">=</span> NavigationStateUtils<span class="token punctuation">.</span><span class="token function">pop<span class="token punctuation">(</span></span>navigationState<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">break</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
|
|
<span class="token comment" spellcheck="true"> // NavigationStateUtils gives you back the same `navigationState` if nothing
|
|
</span> <span class="token comment" spellcheck="true"> // has changed. We will only update state if it has changed.
|
|
</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>navigationState <span class="token operator">!</span><span class="token operator">==</span> navigationState<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token comment" spellcheck="true"> // Always use setState() when setting a new state!
|
|
</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>navigationState<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token comment" spellcheck="true"> // If you are new to ES6, the above is equivalent to:
|
|
</span> <span class="token comment" spellcheck="true"> // this.setState({navigationState: navigationState});
|
|
</span> <span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span></div><p>Cool. I'm getting the hang of this. This is the heart of NavigationExperimental. We are only handling two actions here, but a more complex application could also take into account a "back" action (e.g. Android back button), as well as handle the transition between several tabs in a tabbed application.</p><p>I am still missing the initial scene that will be rendered (as well as the actual navigator that will wrap it, but let's not get ahead of ourselves).</p><h3><a class="anchor" name="step-3-define-scenes"></a>Step 3. Define Scenes <a class="hash-link" href="docs/navigation.html#step-3-define-scenes">#</a></h3><p>First I want to define a Row component out of convenience. It displays some text and can call some function when pressed.</p><div class="prism language-javascript">class <span class="token class-name">TappableRow</span> extends <span class="token class-name">Component</span> <span class="token punctuation">{</span>
|
|
<span class="token function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
|
<TouchableHighlight
|
|
style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>row<span class="token punctuation">}</span>
|
|
underlayColor<span class="token operator">=</span><span class="token string">"#D0D0D0"</span>
|
|
onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>onPress<span class="token punctuation">}</span><span class="token operator">></span>
|
|
<Text style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>buttonText<span class="token punctuation">}</span><span class="token operator">></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>
|
|
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
|
<<span class="token operator">/</span>TouchableHighlight<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></div><p>Now I will define my actual scene. It uses a scroll view to display a vertical list of items. The first row displays the current route's key, and two more rows will call our theoretical navigator's push and pop functions.</p><div class="prism language-javascript">class <span class="token class-name">MyVeryComplexScene</span> extends <span class="token class-name">Component</span> <span class="token punctuation">{</span>
|
|
<span class="token function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
|
<ScrollView style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>scrollView<span class="token punctuation">}</span><span class="token operator">></span>
|
|
<Text 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">></span>
|
|
Route<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>route<span class="token punctuation">.</span>key<span class="token punctuation">}</span>
|
|
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
|
<TappableRow
|
|
text<span class="token operator">=</span><span class="token string">"Tap me to load the next scene"</span>
|
|
onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>onPushRoute<span class="token punctuation">}</span>
|
|
<span class="token operator">/</span><span class="token operator">></span>
|
|
<TappableRow
|
|
text<span class="token operator">=</span><span class="token string">"Tap me to go back"</span>
|
|
onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>onPopRoute<span class="token punctuation">}</span>
|
|
<span class="token operator">/</span><span class="token operator">></span>
|
|
<<span class="token operator">/</span>ScrollView<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></div><h3><a class="anchor" name="step-4-create-a-navigation-stack"></a>Step 4. Create a Navigation Stack <a class="hash-link" href="docs/navigation.html#step-4-create-a-navigation-stack">#</a></h3><p>Now that I have defined the state and a function to manage it, I think I can go ahead and create a proper navigator component now. While I'm at it, I'll render my scene after configuring it with the current route's props.</p><div class="prism language-javascript">class <span class="token class-name">MyVerySimpleNavigator</span> extends <span class="token class-name">Component</span> <span class="token punctuation">{</span>
|
|
|
|
<span class="token comment" spellcheck="true"> // This sets up the methods (e.g. Pop, Push) for navigation.
|
|
</span> <span class="token function">constructor<span class="token punctuation">(</span></span>props<span class="token punctuation">,</span> context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token function">super<span class="token punctuation">(</span></span>props<span class="token punctuation">,</span> context<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token keyword">this</span><span class="token punctuation">.</span>_onPushRoute <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>onNavigationChange<span class="token punctuation">.</span><span class="token function">bind<span class="token punctuation">(</span></span><span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token string">'push'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">this</span><span class="token punctuation">.</span>_onPopRoute <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>onNavigationChange<span class="token punctuation">.</span><span class="token function">bind<span class="token punctuation">(</span></span><span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token string">'pop'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token keyword">this</span><span class="token punctuation">.</span>_renderScene <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_renderScene<span class="token punctuation">.</span><span class="token function">bind<span class="token punctuation">(</span></span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
|
|
<span class="token comment" spellcheck="true"> // Now we finally get to use the `NavigationCardStack` to render the scenes.
|
|
</span> <span class="token function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
|
<NavigationCardStack
|
|
onNavigateBack<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onPopRoute<span class="token punctuation">}</span>
|
|
navigationState<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>navigationState<span class="token punctuation">}</span>
|
|
renderScene<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_renderScene<span class="token punctuation">}</span>
|
|
style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>navigator<span class="token punctuation">}</span>
|
|
<span class="token operator">/</span><span class="token operator">></span>
|
|
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
|
|
<span class="token comment" spellcheck="true"> // Render a scene for route.
|
|
</span> <span class="token comment" spellcheck="true"> // The detailed spec of `sceneProps` is defined at `NavigationTypeDefinition`
|
|
</span> <span class="token comment" spellcheck="true"> // as type `NavigationSceneRendererProps`.
|
|
</span> <span class="token comment" spellcheck="true"> // Here you could choose to render a different component for each route, but
|
|
</span> <span class="token comment" spellcheck="true"> // we'll keep it simple.
|
|
</span> <span class="token function">_renderScene<span class="token punctuation">(</span></span>sceneProps<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
|
<MyVeryComplexScene
|
|
route<span class="token operator">=</span><span class="token punctuation">{</span>sceneProps<span class="token punctuation">.</span>scene<span class="token punctuation">.</span>route<span class="token punctuation">}</span>
|
|
onPushRoute<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onPushRoute<span class="token punctuation">}</span>
|
|
onPopRoute<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onPopRoute<span class="token punctuation">}</span>
|
|
onExit<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>onExit<span class="token punctuation">}</span>
|
|
<span class="token operator">/</span><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></div><p>That's it -- so close to the finish line I can smell it. Let's plug our new navigator into our top-level component:</p><div class="prism language-javascript">class <span class="token class-name">BleedingEdgeApplication</span> extends <span class="token class-name">Component</span> <span class="token punctuation">{</span>
|
|
|
|
<span class="token comment" spellcheck="true"> // constructor and other methods omitted for clarity
|
|
</span>
|
|
<span class="token function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
|
<MyVerySimpleNavigator
|
|
navigationState<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>navigationState<span class="token punctuation">}</span>
|
|
onNavigationChange<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onNavigationChange<span class="token punctuation">}</span>
|
|
onExit<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_exit<span class="token punctuation">}</span>
|
|
<span class="token operator">/</span><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></div><p>We're done! Bask in the glory of NavigationExperimental.</p><h4><a class="anchor" name="hey-i-think-you-are-missing-something"></a>Hey -- I think you are missing something. <a class="hash-link" href="docs/navigation.html#hey-i-think-you-are-missing-something">#</a></h4><p>(Oh yes, sorry about that -- here's our missing imports and styles.)</p><div class="prism language-javascript">import <span class="token punctuation">{</span> NavigationExperimental<span class="token punctuation">,</span> PixelRatio<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> from <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
|
|
|
const 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>
|
|
navigator<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>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
scrollView<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
|
marginTop<span class="token punctuation">:</span> <span class="token number">64</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
row<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
|
padding<span class="token punctuation">:</span> <span class="token number">15</span><span class="token punctuation">,</span>
|
|
backgroundColor<span class="token punctuation">:</span> <span class="token string">'white'</span><span class="token punctuation">,</span>
|
|
borderBottomWidth<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token operator">/</span> PixelRatio<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
|
borderBottomColor<span class="token punctuation">:</span> <span class="token string">'#CDCDCD'</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>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
buttonText<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">'500'</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><h3><a class="anchor" name="homework"></a>Homework <a class="hash-link" href="docs/navigation.html#homework">#</a></h3><p>You are now an expert navigator. Take a look at <a href="https://github.com/facebook/react-native/tree/master/Examples/UIExplorer/js/NavigationExperimental" target="_blank">NavigationExperimental in UIExplorer</a> to learn how to implement other types of navigation hierarchies, such as a tabbed application with multiple navigation stacks.</p></div><div class="docs-prevnext"><a class="docs-prev" href="docs/javascript-environment.html#content">← Prev</a><a class="docs-next" href="docs/performance.html#content">Next →</a></div><p class="edit-page-block">You can <a target="_blank" href="https://github.com/facebook/react-native/blob/master/docs/Navigation.md">edit the content above on GitHub</a> and send us a pull request!</p></div></section><footer class="nav-footer"><section class="sitemap"><a href="/react-native" class="nav-home"><img src="img/header_logo.png" alt="React Native" width="66" height="58"></a><div><h5><a href="docs/">Docs</a></h5><a href="docs/getting-started.html">Getting Started</a><a href="docs/tutorial.html">Tutorial</a><a href="docs/integration-with-existing-apps.html">Integration With Existing Apps</a><a href="docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/support.html">Community</a></h5><a href="/react-native/showcase.html">Showcase</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Upcoming Events</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/support.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://productpains.com/product/react-native/" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://facebook.github.io/react/" target="_blank">React</a></div></section><section class="newsletter"><div id="mc_embed_signup"><form action="//reactnative.us10.list-manage.com/subscribe/post?u=db0dd948e2b729ee62625b1a8&id=47cd41008f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate><div id="mc_embed_signup_scroll"><label for="mce-EMAIL"><h5>Get the React Native Newsletter</h5></label><input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required><div style="position:absolute;left:-5000px;" aria-hidden="true"><input type="text" name="b_db0dd948e2b729ee62625b1a8_47cd41008f" tabindex="-1" value=""></div><div class="clear"><input type="submit" value="Sign up" name="subscribe" id="mc-embedded-subscribe" class="button"></div></div></form></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"></a><section class="copyright">Copyright © 2017 Facebook Inc.</section></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.40" ], hitsPerPage: 5 }
|
|
});
|
|
</script><script src="js/scripts.js"></script><script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script><script type="text/javascript">(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script></body></html> |