Updated docs for 0.29

This commit is contained in:
Website Deployment Script committed 2016-07-01 01:10:56 +00:00
1 parent 50f2181fa7
commit e4b41f03db
8 files changed
+290 -94

No files matched your search

+1 -1
View File
@@ -1240,7 +1240,7 @@ div[data-twttr-id] iframe {
.methodTitle {
font-weight: bold;
font-size: 24px;
color: #E9967A;
color: #2F9C0A;
}
.compactProps .methodTitle {
+223 -56
View File
@@ -1,9 +1,43 @@
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Navigation – React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="Navigation – React Native | A framework for building native apps using React"><meta property="og:type" content="website"><meta property="og:url" content="http://facebook.github.io/react-native/index.html"><meta property="og:image" content="http://facebook.github.io/react-native/img/opengraph.png?2"><meta property="og:description" content="A framework for building native apps using React"><base href="/react-native/releases/0.29/"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"><link rel="shortcut icon" href="img/favicon.png?2"><link rel="stylesheet" href="css/react-native.css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href=""><img src="img/header_logo.png">React Native</a><a class="nav-version" href="/react-native/versions.html">0.29</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="docs/getting-started.html" class="active" data-target=".nav-docs">Docs</a></li><li><a href="support.html" class="">Support</a></li><li><a href="showcase.html" class="">Showcase</a></li><li><a href="blog/" class="">Blog</a></li></ul><div class="algolia-search-wrapper"><input id="algolia-doc-search" type="text" placeholder="Search docs..."></div><ul class="nav-site nav-site-external"><li><a href="https://github.com/facebook/react-native" class="">GitHub</a></li><li><a href="http://facebook.github.io/react" class="">React</a></li></ul></div></div></div><section class="content wrap documentationContent"><div class="nav-docs"><div class="nav-docs-viewport"><div class="nav-docs-section"><h3>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/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/javascript-environment.html">JavaScript Environment</a></li><li><a style="margin-left:0;" class="active" href="docs/navigator-comparison.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/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 Line truncated
initialRoute<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">&#x27;My Initial Scene&#x27;</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 punctuation">}</span>
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Navigation – React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="Navigation – React Native | A framework for building native apps using React"><meta property="og:type" content="website"><meta property="og:url" content="http://facebook.github.io/react-native/index.html"><meta property="og:image" content="http://facebook.github.io/react-native/img/opengraph.png?2"><meta property="og:description" content="A framework for building native apps using React"><base href="/react-native/releases/0.29/"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"><link rel="shortcut icon" href="img/favicon.png?2"><link rel="stylesheet" href="css/react-native.css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href=""><img src="img/header_logo.png">React Native</a><a class="nav-version" href="/react-native/versions.html">0.29</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="docs/getting-started.html" class="active" data-target=".nav-docs">Docs</a></li><li><a href="support.html" class="">Support</a></li><li><a href="showcase.html" class="">Showcase</a></li><li><a href="blog/" class="">Blog</a></li></ul><div class="algolia-search-wrapper"><input id="algolia-doc-search" type="text" placeholder="Search docs..."></div><ul class="nav-site nav-site-external"><li><a href="https://github.com/facebook/react-native" class="">GitHub</a></li><li><a href="http://facebook.github.io/react" class="">React</a></li></ul></div></div></div><section class="content wrap documentationContent"><div class="nav-docs"><div class="nav-docs-viewport"><div class="nav-docs-section"><h3>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/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/javascript-environment.html">JavaScript Environment</a></li><li><a style="margin-left:0;" class="active" href="docs/navigator-comparison.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/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 Line truncated
initialRoute<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">&#x27;My Initial Scene&#x27;</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 punctuation">}</span>
renderScene<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>route<span class="token punctuation">,</span> navigator<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
<span class="token comment" spellcheck="true"> // We&#x27;ll get to this function soon.
</span> <span class="token punctuation">}</span><span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">&gt;</span></div><p>Something you will encounter a lot when dealing with navigation is the concept of routes. A route is an object that contains information about a scene. It is used to provide all the context the <code>renderScene</code> function needs to render a scene.</p><p>The <code>push</code> and <code>pop</code> functions provided by Navigator can be used to push and pop routes into the navigation stack. A more complete example that demonstrates the pushing and popping of routes could therefore look something like this:</p><div class="prism language-javascript">class <span class="token class-name">MyScene</span> extends <span class="token class-name">Component</span> <span class="token punctuation">{</span>
&lt;MyScene title<span class="token operator">=</span><span class="token punctuation">{</span>route<span class="token punctuation">.</span>title<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 operator">/</span><span class="token operator">&gt;</span></div><p>The above example will display a single scene, but in order to push a new scene onto screen you will need to learn about <code>push</code> and <code>pop</code>. These two methods are provided by the <code>navigator</code> object that is passed to your <code>renderScene</code> function. They can be used, as you may have realized, to push and pop routes into your navigation stack.</p><p>A more complete example that demonstrates the pushing and popping of routes could therefore look something like this:</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">&#x27;react&#x27;</span><span class="token punctuation">;</span>
import <span class="token punctuation">{</span> Navigator<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">&#x27;react-native&#x27;</span><span class="token punctuation">;</span>
export default class <span class="token class-name">SimpleNavigationApp</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>
&lt;Navigator
initialRoute<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">&#x27;My Initial Scene&#x27;</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 punctuation">}</span>
renderScene<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>route<span class="token punctuation">,</span> navigator<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span>
&lt;MyScene
title<span class="token operator">=</span><span class="token punctuation">{</span>route<span class="token punctuation">.</span>title<span class="token punctuation">}</span>
<span class="token comment" spellcheck="true"> // Function to call when a new scene should be displayed
</span> onForward<span class="token operator">=</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>
const nextIndex <span class="token operator">=</span> route<span class="token punctuation">.</span>index <span class="token operator">+</span> <span class="token number">1</span><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;Scene &#x27;</span> <span class="token operator">+</span> nextIndex<span class="token punctuation">,</span>
index<span class="token punctuation">:</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 punctuation">}</span>
<span class="token comment" spellcheck="true"> // Function to call to go back to the previous scene
</span> onBack<span class="token operator">=</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">if</span> <span class="token punctuation">(</span>route<span class="token punctuation">.</span>index <span class="token operator">&gt;</span> <span class="token number">0</span><span class="token punctuation">)</span> <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 operator">/</span><span class="token operator">&gt;</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>
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>
onForward<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span>func<span class="token punctuation">.</span>isRequired<span class="token punctuation">,</span>
@@ -22,40 +56,30 @@
&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>
class <span class="token class-name">SimpleNavigationApp</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>
&lt;Navigator
initialRoute<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">&#x27;My Initial Scene&#x27;</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 punctuation">}</span>
renderScene<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>route<span class="token punctuation">,</span> navigator<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span>
&lt;MyScene
title<span class="token operator">=</span><span class="token punctuation">{</span>route<span class="token punctuation">.</span>title<span class="token punctuation">}</span>
onForward<span class="token operator">=</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>
const nextIndex <span class="token operator">=</span> route<span class="token punctuation">.</span>index <span class="token operator">+</span> <span class="token number">1</span><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;Scene &#x27;</span> <span class="token operator">+</span> nextIndex<span class="token punctuation">,</span>
index<span class="token punctuation">:</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 punctuation">}</span>
onBack<span class="token operator">=</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">if</span> <span class="token punctuation">(</span>route<span class="token punctuation">.</span>index <span class="token operator">&gt;</span> <span class="token number">0</span><span class="token punctuation">)</span> <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 operator">/</span><span class="token operator">&gt;</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></div><p>In this example, the <code>MyScene</code> component is passed the title of the current route via the <code>title</code> prop. It displays two tappable components that call the <code>onForward</code> and <code>onBack</code> functions passed through its props, which in turn will call <code>navigator.push()</code> and <code>navigator.pop()</code> as needed.</p><p>While this is a very basic example, it can easily be adapted to render an entirely different component based on the route that is passed to the <code>renderScene</code> function. Navigator will push new scenes from the right by default, and you can control this behavior by using the <code>configureScene</code> function. Check out the <a href="docs/navigator.html" target="_blank">Navigator API reference</a> to learn more.</p><h2><a class="anchor" name="navigatorios"></a>NavigatorIOS <a class="hash-link" href="docs/navigator-comparison.html#navigatorios">#</a></h2><p>If you are targeting iOS only, you may also want to consider using <code>NavigatorIOS</code>. It looks and feels just like <code>UINavigationController</code>, because it is actually built on top of it.</p><div class="prism language-javascript">&lt;NavigatorIOS
<span class="token punctuation">}</span></div><p>In this example, the <code>MyScene</code> component is passed the title of the current route via the <code>title</code> prop. It displays two tappable components that call the <code>onForward</code> and <code>onBack</code> functions passed through its props, which in turn will call <code>navigator.push()</code> and <code>navigator.pop()</code> as needed.</p><p>While this is a very basic example, it can easily be adapted to render an entirely different component based on the route that is passed to the <code>renderScene</code> function. Navigator will push new scenes from the right by default, and 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 more code samples.</p><h2><a class="anchor" name="navigatorios"></a>NavigatorIOS <a class="hash-link" href="docs/navigator-comparison.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">&lt;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">&#x27;My Initial Scene&#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></div><p>Just like Navigator, it it 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>Check out the <a href="docs/navigatorios.html" target="_blank">NavigatorIOS reference docs</a> to learn more about this component.</p><div class="prism language-javascript">class <span class="token class-name">MyScene</span> extends <span class="token class-name">Component</span> <span class="token punctuation">{</span>
<span class="token operator">/</span><span class="token operator">&gt;</span></div><p>Just like Navigator, NavigatorIOS 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 &quot;navigator&quot; 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 NavigatorIOS leverages native UIKit navigation, it will automatically render a navigation bar with a back button and title.</p><p>Check out the <a href="docs/navigatorios.html" target="_blank">NavigatorIOS reference docs</a> to learn more about this component.</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">&#x27;react&#x27;</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">&#x27;react-native&#x27;</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>
&lt;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">&#x27;My Initial Scene&#x27;</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">&gt;</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>
@@ -64,7 +88,6 @@ class <span class="token class-name">SimpleNavigationApp</span> extends <span cl
<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 keyword">this</span><span class="token punctuation">.</span>_onBack <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_onBack<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>
@@ -73,10 +96,6 @@ class <span class="token class-name">SimpleNavigationApp</span> extends <span cl
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">_onBack<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">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 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>
&lt;View<span class="token operator">&gt;</span>
@@ -84,30 +103,178 @@ class <span class="token class-name">SimpleNavigationApp</span> extends <span cl
&lt;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">&gt;</span>
&lt;Text<span class="token operator">&gt;</span>Tap me to load the next scene&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>TouchableHighlight<span class="token operator">&gt;</span>
&lt;TouchableHighlight onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onBack<span class="token punctuation">}</span><span class="token operator">&gt;</span>
&lt;Text<span class="token operator">&gt;</span>Tap me to go back&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>TouchableHighlight<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></div><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/navigator-comparison.html#navigationexperimental">#</a></h2><p>Navigator and NavigatorIOS 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&#x27;s navigation.</p><div class="prism language-javascript">&lt;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">&gt;</span></div><p>You can import NavigationExperimental like any other component in React Native. Once you have that, you can deconstruct any additional components from NavigationExperimental that you may find useful. Since I am feeling like building navigation stacks today, I&#x27;ll go ahead and pick out NavigationCardStack and NavigationStateUtils.</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">&#x27;react&#x27;</span><span class="token punctuation">;</span>
import <span class="token punctuation">{</span> NavigationExperimental <span class="token punctuation">}</span> from <span class="token string">&#x27;react-native&#x27;</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, NavigationExperimental takes a different approach than Navigator and NavigatorIOS. 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/navigator-comparison.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">&#x27;My Initial Scene&#x27;</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&#x27;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&#x27;s literally the next step. We&#x27;ll get to it!
</span> <span class="token punctuation">}</span>
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>
&lt;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">&#x27;My Initial Scene&#x27;</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 punctuation">}</span>
renderScene<span class="token operator">=</span><span class="token punctuation">{</span> <span class="token punctuation">(</span>route<span class="token punctuation">,</span> navigator<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span>
&lt;MyScene title<span class="token operator">=</span><span class="token punctuation">{</span>route<span class="token punctuation">.</span>title<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token punctuation">)</span>
&lt;Text<span class="token operator">&gt;</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>&lt;<span class="token operator">/</span>Text<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><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="navigation-experimental"></a>Navigation (Experimental) <a class="hash-link" href="docs/navigator-comparison.html#navigation-experimental">#</a></h2><p>If you are looking for a more powerful navigation API, check out <a href="https://github.com/facebook/react-native/tree/master/Examples/UIExplorer/NavigationExperimental" target="_blank">NavigationExperimental</a>. It provides greater customization over your transitions, uses single-directional data flow using reducers to manipulate state at a top-level object, and offloads transition animations to the GPU.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/performance.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
<span class="token punctuation">}</span></div><p>Alright, now we have a simple stateful component that doesn&#x27;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/navigator-comparison.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 &quot;push&quot; or &quot;pop&quot; 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">&#x27;push&#x27;</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">&#x27;Route-&#x27;</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">&#x27;pop&#x27;</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&#x27;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 &quot;back&quot; 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 lets 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/navigator-comparison.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>
&lt;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">&quot;#D0D0D0&quot;</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">&gt;</span>
&lt;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">&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>TouchableHighlight<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 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&#x27;s key, and two more rows will call our theoretical navigator&#x27;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>
&lt;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">&gt;</span>
&lt;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">&gt;</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>
&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
&lt;TappableRow
text<span class="token operator">=</span><span class="token string">&quot;Tap me to load the next scene&quot;</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">&gt;</span>
&lt;TappableRow
text<span class="token operator">=</span><span class="token string">&quot;Tap me to go back&quot;</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">&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></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/navigator-comparison.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&#x27;m at it, I&#x27;ll render my scene after configuring it with the current route&#x27;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">&#x27;push&#x27;</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">&#x27;pop&#x27;</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>
&lt;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">&gt;</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&#x27;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>
&lt;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">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span></div><p>That&#x27;s it -- so close to the finish line I can smell it. Lets 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>
&lt;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">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span></div><p>We&#x27;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/navigator-comparison.html#hey-i-think-you-are-missing-something">#</a></h4><p>(Oh yes, sorry about that -- here&#x27;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">&#x27;react-native&#x27;</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">&#x27;white&#x27;</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">&#x27;#CDCDCD&#x27;</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">&#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></div><h3><a class="anchor" name="homework"></a>Homework <a class="hash-link" href="docs/navigator-comparison.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/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-next" href="docs/performance.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+17 -12
View File
@@ -1,30 +1,31 @@
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Navigator – React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="Navigator – React Native | A framework for building native apps using React"><meta property="og:type" content="website"><meta property="og:url" content="http://facebook.github.io/react-native/index.html"><meta property="og:image" content="http://facebook.github.io/react-native/img/opengraph.png?2"><meta property="og:description" content="A framework for building native apps using React"><base href="/react-native/releases/0.29/"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"><link rel="shortcut icon" href="img/favicon.png?2"><link rel="stylesheet" href="css/react-native.css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href=""><img src="img/header_logo.png">React Native</a><a class="nav-version" href="/react-native/versions.html">0.29</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="docs/getting-started.html" class="active" data-target=".nav-docs">Docs</a></li><li><a href="support.html" class="">Support</a></li><li><a href="showcase.html" class="">Showcase</a></li><li><a href="blog/" class="">Blog</a></li></ul><div class="algolia-search-wrapper"><input id="algolia-doc-search" type="text" placeholder="Search docs..."></div><ul class="nav-site nav-site-external"><li><a href="https://github.com/facebook/react-native" class="">GitHub</a></li><li><a href="http://facebook.github.io/react" class="">React</a></li></ul></div></div></div><section class="content wrap documentationContent"><div class="nav-docs"><div class="nav-docs-viewport"><div class="nav-docs-section"><h3>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/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/javascript-environment.html">JavaScript Environment</a></li><li><a style="margin-left:0;" class="" href="docs/navigator-comparison.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/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="mLine truncated
You should consider using this component instead of <code>NavigatorIOS</code> if you&#x27;re
building a cross-platform app. <code>Navigator</code> is implemented in JavaScript
whereas <code>NavigatorIOS</code> is a wrapper around <code>UINavigationController</code>.</p><p>To set up the <code>Navigator</code> you provide one or more objects called routes,
It is implemented in JavaScript and is available on both iOS and Android. If
you are targeting iOS only, you may also want to consider using
<a href="docs/navigatorios.html" target="_blank"><code>NavigatorIOS</code></a> as it leverages native UIKit
navigation.</p><p>To set up the <code>Navigator</code> you provide one or more objects called routes,
to identify each scene. You also provide a <code>renderScene</code> function that
renders the scene for each route object.</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">&#x27;react&#x27;</span><span class="token punctuation">;</span>
import <span class="token punctuation">{</span> Text<span class="token punctuation">,</span> Navigator <span class="token punctuation">}</span> from <span class="token string">&#x27;react-native&#x27;</span><span class="token punctuation">;</span>
class <span class="token class-name">NavAllDay</span> extends <span class="token class-name">Component</span> <span class="token punctuation">{</span>
export default class <span class="token class-name">NavAllDay</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>
&lt;Navigator
initialRoute<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>name<span class="token punctuation">:</span> <span class="token string">&#x27;Awesome Scene&#x27;</span><span class="token punctuation">}</span><span class="token punctuation">}</span>
initialRoute<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">&#x27;Awesome Scene&#x27;</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 punctuation">}</span>
renderScene<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>route<span class="token punctuation">,</span> navigator<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span>
&lt;Text<span class="token operator">&gt;</span>Hello <span class="token punctuation">{</span>route<span class="token punctuation">.</span>name<span class="token punctuation">}</span><span class="token operator">!</span>&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
&lt;Text<span class="token operator">&gt;</span>Hello <span class="token punctuation">{</span>route<span class="token punctuation">.</span>title<span class="token punctuation">}</span><span class="token operator">!</span>&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
<span class="token punctuation">}</span>
style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>padding<span class="token punctuation">:</span> <span class="token number">100</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>In the above example, <code>initialRoute</code> is used to specify the first route. It
contains a <code>name</code> property that identifies the route. The <code>renderScene</code>
prop returns a function that displays text based on the route&#x27;s name.</p><h3><a class="anchor" name="additional-scenes"></a>Additional Scenes <a class="hash-link" href="docs/navigator.html#additional-scenes">#</a></h3><p>The first example demonstrated one scene. To set up multiple scenes, you pass
contains a <code>title</code> property that identifies the route. The <code>renderScene</code>
prop returns a function that displays text based on the route&#x27;s title.</p><h3><a class="anchor" name="additional-scenes"></a>Additional Scenes <a class="hash-link" href="docs/navigator.html#additional-scenes">#</a></h3><p>The first example demonstrated one scene. To set up multiple scenes, you pass
the <code>initialRouteStack</code> prop to <code>Navigator</code>:</p><div class="prism language-javascript"><span class="token function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
const routes <span class="token operator">=</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>name<span class="token punctuation">:</span> <span class="token string">&#x27;First Scene&#x27;</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 punctuation">,</span>
<span class="token punctuation">{</span>name<span class="token punctuation">:</span> <span class="token string">&#x27;Second Scene&#x27;</span><span class="token punctuation">,</span> index<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>title<span class="token punctuation">:</span> <span class="token string">&#x27;First Scene&#x27;</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 punctuation">,</span>
<span class="token punctuation">{</span>title<span class="token punctuation">:</span> <span class="token string">&#x27;Second Scene&#x27;</span><span class="token punctuation">,</span> index<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><span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
&lt;Navigator
@@ -38,7 +39,7 @@ the <code>initialRouteStack</code> prop to <code>Navigator</code>:</p><div class
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 operator">&gt;</span>
&lt;Text<span class="token operator">&gt;</span>Hello <span class="token punctuation">{</span>route<span class="token punctuation">.</span>name<span class="token punctuation">}</span><span class="token operator">!</span>&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
&lt;Text<span class="token operator">&gt;</span>Hello <span class="token punctuation">{</span>route<span class="token punctuation">.</span>title<span class="token punctuation">}</span><span class="token operator">!</span>&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>TouchableHighlight<span class="token operator">&gt;</span>
<span class="token punctuation">}</span>
style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>padding<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">}</span><span class="token punctuation">}</span>
@@ -87,7 +88,11 @@ on the previous example, you can set this up as follows:</p><div class="prism la
<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>This sets up a left navigator bar button that&#x27;s visible on scenes after the
the first one. When the button is tapped the navigator is popped.</p><h3><a class="anchor" name="scene-transitions"></a>Scene Transitions <a class="hash-link" href="docs/navigator.html#scene-transitions">#</a></h3><p>To change the animation or gesture properties of the scene, provide a
the first one. When the button is tapped the navigator is popped.</p><p>Another type of navigation bar, with breadcrumbs, is provided by
<code>Navigator.BreadcrumbNavigationBar</code>. You can also provide your own navigation
bar by passing it through the <code>navigationBar</code> prop. See the
<a href="https://github.com/facebook/react-native/tree/master/Examples/UIExplorer" target="_blank">UIExplorer</a>
demo to try out both built-in navigation bars out and see how to use them.</p><h3><a class="anchor" name="scene-transitions"></a>Scene Transitions <a class="hash-link" href="docs/navigator.html#scene-transitions">#</a></h3><p>To change the animation or gesture properties of the scene, provide a
<code>configureScene</code> prop to get the config object for a given route:</p><div class="prism language-javascript">&lt;Navigator
renderScene<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>route<span class="token punctuation">,</span> navigator<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span>
<span class="token comment" spellcheck="true"> // ...
+45 -21
View File
@@ -1,18 +1,23 @@
<!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"><base href="/react-native/releases/0.29/"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"><link rel="shortcut icon" href="img/favicon.png?2"><link rel="stylesheet" href="css/react-native.css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href=""><img src="img/header_logo.png">React Native</a><a class="nav-version" href="/react-native/versions.html">0.29</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="docs/getting-started.html" class="active" data-target=".nav-docs">Docs</a></li><li><a href="support.html" class="">Support</a></li><li><a href="showcase.html" class="">Showcase</a></li><li><a href="blog/" class="">Blog</a></li></ul><div class="algolia-search-wrapper"><input id="algolia-doc-search" type="text" placeholder="Search docs..."></div><ul class="nav-site nav-site-external"><li><a href="https://github.com/facebook/react-native" class="">GitHub</a></li><li><a href="http://facebook.github.io/react" class="">React</a></li></ul></div></div></div><section class="content wrap documentationContent"><div class="nav-docs"><div class="nav-docs-viewport"><div class="nav-docs-section"><h3>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/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/javascript-environment.html">JavaScript Environment</a></li><li><a style="margin-left:0;" class="" href="docs/navigator-comparison.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/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 stLine truncated
implement back-swipe functionality in your iOS app. Take a look at
<!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"><base href="/react-native/releases/0.29/"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"><link rel="shortcut icon" href="img/favicon.png?2"><link rel="stylesheet" href="css/react-native.css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href=""><img src="img/header_logo.png">React Native</a><a class="nav-version" href="/react-native/versions.html">0.29</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="docs/getting-started.html" class="active" data-target=".nav-docs">Docs</a></li><li><a href="support.html" class="">Support</a></li><li><a href="showcase.html" class="">Showcase</a></li><li><a href="blog/" class="">Blog</a></li></ul><div class="algolia-search-wrapper"><input id="algolia-doc-search" type="text" placeholder="Search docs..."></div><ul class="nav-site nav-site-external"><li><a href="https://github.com/facebook/react-native" class="">GitHub</a></li><li><a href="http://facebook.github.io/react" class="">React</a></li></ul></div></div></div><section class="content wrap documentationContent"><div class="nav-docs"><div class="nav-docs-viewport"><div class="nav-docs-section"><h3>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/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/javascript-environment.html">JavaScript Environment</a></li><li><a style="margin-left:0;" class="" href="docs/navigator-comparison.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/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 stLine truncated
<a href="https://developer.apple.com/library/ios/documentation/UIKit/Reference/UINavigationController_Class/" target="_blank"><code>UINavigationController</code></a>,
enabling you to implement a navigation stack. It works exactly the same as it
would on a native app using <code>UINavigationController</code>, providing the same
animations and behavior from UIKIt.</p><p>As the name implies, it is only available on iOS. Take a look at
<a href="/docs/navigator.html" target=""><code>Navigator</code></a> for a similar solution for your
cross-platform needs.</p><p>To set up the navigator, provide the <code>initialRoute</code> prop with a route
cross-platform needs, or 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><p>To set up the navigator, provide the <code>initialRoute</code> prop with a route
object. A route object is used to describe each scene that your app
navigates to. <code>initialRoute</code> represents the first route in your navigator.</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">&#x27;react&#x27;</span><span class="token punctuation">;</span>
import <span class="token punctuation">{</span> NavigatorIOS<span class="token punctuation">,</span> Text <span class="token punctuation">}</span> from <span class="token string">&#x27;react-native&#x27;</span><span class="token punctuation">;</span>
class <span class="token class-name">NavvyIOS</span> extends <span class="token class-name">Component</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>
&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>
component<span class="token punctuation">:</span> MyScene<span class="token punctuation">,</span>
title<span class="token punctuation">:</span> <span class="token string">&#x27;My Initial Scene&#x27;</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">&gt;</span>
@@ -20,24 +25,43 @@ class <span class="token class-name">NavvyIOS</span> extends <span class="token
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
class <span class="token class-name">MyView</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>
&lt;Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>marginTop<span class="token punctuation">:</span> <span class="token number">200</span><span class="token punctuation">,</span> alignSelf<span class="token punctuation">:</span> <span class="token string">&#x27;center&#x27;</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
See you on the other nav<span class="token operator">!</span>
&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</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 punctuation">}</span></div><p>In this code, the navigator sets its title and renders <code>MyView</code>. The
component specified in <code>initialRoute</code> will receive a <code>route</code> prop and a
<code>navigator</code> prop representing the navigator.</p><p>You can optionally pass in a <code>passProps</code> property to your <code>initialRoute</code>.
<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 keyword">this</span><span class="token punctuation">.</span>_onBack <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_onBack<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">&#x27;Scene &#x27;</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>
&lt;View<span class="token operator">&gt;</span>
&lt;Text<span class="token operator">&gt;</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>&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
&lt;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">&gt;</span>
&lt;Text<span class="token operator">&gt;</span>Tap me to load the next scene&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>TouchableHighlight<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></div><p>In this code, the navigator renders the component specified in initialRoute,
which in this case is <code>MyScene</code>. This component will receive a <code>route</code> prop
and a <code>navigator</code> prop representing the navigator. The navigator&#x27;s navigation
bar will render the title for the current scene, &quot;My Initial Scene&quot;.</p><p>You can optionally pass in a <code>passProps</code> property to your <code>initialRoute</code>.
<code>NavigatorIOS</code> passes this in as props to the rendered component:</p><div class="prism language-javascript">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;Foo This&#x27;</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">&#x27;My Initial Scene&#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></div><p>You can then access the props passed in:</p><div class="prism language-javascript">&lt;Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>marginTop<span class="token punctuation">:</span> <span class="token number">200</span><span class="token punctuation">,</span> alignSelf<span class="token punctuation">:</span> <span class="token string">&#x27;center&#x27;</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
See you on the other nav <span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>myProp<span class="token punctuation">}</span><span class="token operator">!</span>
&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span></div><h4><a class="anchor" name="handling-navigation"></a>Handling Navigation <a class="hash-link" href="docs/navigatorios.html#handling-navigation">#</a></h4><p>To trigger navigation functionality such as pushing or popping a view, you
<span class="token punctuation">}</span><span class="token punctuation">}</span></div><p>You can then access the props passed in via <code>{this.props.myProp}</code>.</p><h4><a class="anchor" name="handling-navigation"></a>Handling Navigation <a class="hash-link" href="docs/navigatorios.html#handling-navigation">#</a></h4><p>To trigger navigation functionality such as pushing or popping a view, you
have access to a <code>navigator</code> object. The object is passed in as a prop to any
component that is rendered by <code>NavigatorIOS</code>. You can then call the
relevant methods to perform the navigation action you need:</p><div class="prism language-javascript">class <span class="token class-name">MyView</span> extends <span class="token class-name">Component</span> <span class="token punctuation">{</span>
+2 -2
View File
@@ -8,12 +8,12 @@ class <span class="token class-name">Bananas</span> extends <span class="token c
uri<span class="token punctuation">:</span> <span class="token string">&#x27;https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg&#x27;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
&lt;Image source<span class="token operator">=</span><span class="token punctuation">{</span>pic<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
&lt;Image source<span class="token operator">=</span><span class="token punctuation">{</span>pic<span class="token punctuation">}</span> style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>width<span class="token punctuation">:</span> <span class="token number">193</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">110</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>
AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent<span class="token punctuation">(</span></span><span class="token string">&#x27;Bananas&#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> Bananas<span class="token punctuation">)</span><span class="token punctuation">;</span></div><iframe style="margin-top:4px;" width="880" height="420" data-src="//npmcdn.com/react-native-web-player@1.0.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20&#x27;react&#x27;%3B%0Aimport%20%7B%20AppRegistry%2C%20Image%20%7D%20from%20&#x27;react-native&#x27;%3B%0A%0Aclass%20Bananas%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20let%20pic%20%3D%20%7B%0A%20%20%20%20%20%20uri%3A%20&#x27;https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fcommons%2Fd%2Fde%2FBananavarieties.jpg&#x27;%0A%20%20%20%20%7D%3B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CImage%20source%3D%7Bpic%7D%20%2F%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0AAppRegistry.registerComponent(&#x27;Bananas&#x27;%2C%20()%20%3D%3E%20Bananas)%3B" frameborder="0"></iframe></div><p>Notice that <code>{pic}</code> is surrounded by braces, to embed the variable <code>pic</code> into JSX. You can put any JavaScript expression inside braces in JSX.</p><p>Your own components can also use <code>props</code>. This lets you make a single component
AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent<span class="token punctuation">(</span></span><span class="token string">&#x27;Bananas&#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> Bananas<span class="token punctuation">)</span><span class="token punctuation">;</span></div><iframe style="margin-top:4px;" width="880" height="420" data-src="//npmcdn.com/react-native-web-player@1.0.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20&#x27;react&#x27;%3B%0Aimport%20%7B%20AppRegistry%2C%20Image%20%7D%20from%20&#x27;react-native&#x27;%3B%0A%0Aclass%20Bananas%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20let%20pic%20%3D%20%7B%0A%20%20%20%20%20%20uri%3A%20&#x27;https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fcommons%2Fd%2Fde%2FBananavarieties.jpg&#x27;%0A%20%20%20%20%7D%3B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CImage%20source%3D%7Bpic%7D%20style%3D%7B%7Bwidth%3A%20193%2C%20height%3A%20110%7D%7D%2F%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0AAppRegistry.registerComponent(&#x27;Bananas&#x27;%2C%20()%20%3D%3E%20Bananas)%3B" frameborder="0"></iframe></div><p>Notice that <code>{pic}</code> is surrounded by braces, to embed the variable <code>pic</code> into JSX. You can put any JavaScript expression inside braces in JSX.</p><p>Your own components can also use <code>props</code>. This lets you make a single component
that is used in many different places in your app, with slightly different
properties in each place. Just refer to <code>this.props</code> in your <code>render</code> function. Here&#x27;s an example:</p><div class="web-player"><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">&#x27;react&#x27;</span><span class="token punctuation">;</span>
import <span class="token punctuation">{</span> AppRegistry<span class="token punctuation">,</span> Text<span class="token punctuation">,</span> View <span class="token punctuation">}</span> from <span class="token string">&#x27;react-native&#x27;</span><span class="token punctuation">;</span>
Binary file not shown.

After

Width:  |  Height:  |  Size: 151 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 63 KiB

+2 -2
View File
@@ -1,4 +1,4 @@
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Documentation archive – React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="Documentation archive – React Native | A framework for building native apps using React"><meta property="og:type" content="website"><meta property="og:url" content="http://facebook.github.io/react-native/index.html"><meta property="og:image" content="http://facebook.github.io/react-native/img/opengraph.png?2"><meta property="og:description" content="A framework for building native apps using React"><base href="/react-native/releases/next/"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"><link rel="shortcut icon" href="img/favicon.png?2"><link rel="stylesheet" href="css/react-native.css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href=""><img src="img/header_logo.png">React Native</a><a class="nav-version" href="/react-native/versions.html">next</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="docs/getting-started.html" class="" data-target=".nav-docs">Docs</a></li><li><a href="support.html" class="">Support</a></li><li><a href="showcase.html" class="">Showcase</a></li><li><a href="blog/" class="">Blog</a></li></ul><div class="algolia-search-wrapper"><input id="algolia-doc-search" type="text" placeholder="Search docs..."></div><ul class="nav-site nav-site-external"><li><a href="https://github.com/facebook/react-native" class="">GitHub</a></li><li><a href="http://facebook.github.io/react" class="">React</a></li></ul></div></div></div><section class="content wrap documentationContent nosidebar"><div class="inner-content"><h1>React Native Versions</h1><p>React Native is following a 2-week train release. Every two weeks, a Release Candidate (rc) branch is created off of master and the previous rc branch is being officially released.</p><table class="versions"><tbody><tr><th>master</th><td><a href="/react-native/releases/next">Docs</a></td><td></td></tr><tr><th>0.29-rc</th><td><a href="/react-native/releases/0.29">Docs</a></td><td><a href="https://github.com/facebook/react-native/releases/tag/v0.29.0-rc">Release Notes</a></td></tr><tr><th>(current) 0.28</th><td><a href="/react-native">Docs</a></td><td><a href="https://github.com/facebook/react-native/releases/tag/v0.28.0">Release Notes</a></td></tr><tr><th>0.27</th><td><a href="/react-native/releases/0.27">Docs</a></td><td><a href="https://github.com/facebook/react-native/releases/tag/v0.27.0">Release Notes</a></td></tr><tr><th>0.26</th><td><a href="/react-native/releases/0.26">Docs</a></td><td><a href="https://github.com/facebook/react-native/releases/tag/v0.26.0">Release Notes</a></td></tr><tr><th>0.25</th><td><a href="/react-native/releases/0.25">Docs</a></td><td><a href="https://github.com/facebook/react-native/releases/tag/v0.25.0">Release Notes</a></td></tr><tr><th>0.24</th><td><a href="/react-native/releases/0.24">Docs</a></td><td><a href="https://github.com/facebook/react-native/releases/tag/v0.24.0">Release Notes</a></td></tr><tr><th>0.23</th><td><a href="/react-native/releases/0.23">Docs</a></td><td><a href="https://github.com/facebook/react-native/releases/tag/v0.23.0">Release Notes</a></td></tr><tr><th>0.22</th><td><a href="/react-native/releases/0.22">Docs</a></td><td><a href="https://github.com/facebook/react-native/releases/tag/v0.22.0">Release Notes</a></td></tr><tr><th>0.21</th><td><a href="/react-native/releases/0.21">Docs</a></td><td><a href="https://github.com/facebook/react-native/releases/tag/v0.21.0">Release Notes</a></td></tr><tr><th>0.20</th><td><a href="/react-native/releases/0.20">Docs</a></td><td><a href="https://github.com/facebook/react-native/releases/tag/v0.20.0">Release Notes</a></td></tr><tr><th>0.19</th><td><a href="/react-native/releases/0.19">Docs</a></td><td><a href="https://github.com/facebook/react-native/releases/tag/v0.19.0">Release Notes</a></td></tr><tr><th>0.18</th><td><a href="/react-native/releases/0.18">Docs</a></td><td><a href="https://github.com/facebook/react-native/releases/tag/v0.18.0">Release Notes</a></td></tr></tbody></table></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Documentation archive – React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="Documentation archive – React Native | A framework for building native apps using React"><meta property="og:type" content="website"><meta property="og:url" content="http://facebook.github.io/react-native/index.html"><meta property="og:image" content="http://facebook.github.io/react-native/img/opengraph.png?2"><meta property="og:description" content="A framework for building native apps using React"><base href="/react-native/releases/0.29/"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"><link rel="shortcut icon" href="img/favicon.png?2"><link rel="stylesheet" href="css/react-native.css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href=""><img src="img/header_logo.png">React Native</a><a class="nav-version" href="/react-native/versions.html">0.29</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="docs/getting-started.html" class="" data-target=".nav-docs">Docs</a></li><li><a href="support.html" class="">Support</a></li><li><a href="showcase.html" class="">Showcase</a></li><li><a href="blog/" class="">Blog</a></li></ul><div class="algolia-search-wrapper"><input id="algolia-doc-search" type="text" placeholder="Search docs..."></div><ul class="nav-site nav-site-external"><li><a href="https://github.com/facebook/react-native" class="">GitHub</a></li><li><a href="http://facebook.github.io/react" class="">React</a></li></ul></div></div></div><section class="content wrap documentationContent nosidebar"><div class="inner-content"><h1>React Native Versions</h1><p>React Native is following a 2-week train release. Every two weeks, a Release Candidate (rc) branch is created off of master and the previous rc branch is being officially released.</p><table class="versions"><tbody><tr><th>master</th><td><a href="/react-native/releases/next">Docs</a></td><td></td></tr><tr><th>0.29-rc</th><td><a href="/react-native/releases/0.29">Docs</a></td><td><a href="https://github.com/facebook/react-native/releases/tag/v0.29.0-rc">Release Notes</a></td></tr><tr><th>(current) 0.28</th><td><a href="/react-native">Docs</a></td><td><a href="https://github.com/facebook/react-native/releases/tag/v0.28.0">Release Notes</a></td></tr><tr><th>0.27</th><td><a href="/react-native/releases/0.27">Docs</a></td><td><a href="https://github.com/facebook/react-native/releases/tag/v0.27.0">Release Notes</a></td></tr><tr><th>0.26</th><td><a href="/react-native/releases/0.26">Docs</a></td><td><a href="https://github.com/facebook/react-native/releases/tag/v0.26.0">Release Notes</a></td></tr><tr><th>0.25</th><td><a href="/react-native/releases/0.25">Docs</a></td><td><a href="https://github.com/facebook/react-native/releases/tag/v0.25.0">Release Notes</a></td></tr><tr><th>0.24</th><td><a href="/react-native/releases/0.24">Docs</a></td><td><a href="https://github.com/facebook/react-native/releases/tag/v0.24.0">Release Notes</a></td></tr><tr><th>0.23</th><td><a href="/react-native/releases/0.23">Docs</a></td><td><a href="https://github.com/facebook/react-native/releases/tag/v0.23.0">Release Notes</a></td></tr><tr><th>0.22</th><td><a href="/react-native/releases/0.22">Docs</a></td><td><a href="https://github.com/facebook/react-native/releases/tag/v0.22.0">Release Notes</a></td></tr><tr><th>0.21</th><td><a href="/react-native/releases/0.21">Docs</a></td><td><a href="https://github.com/facebook/react-native/releases/tag/v0.21.0">Release Notes</a></td></tr><tr><th>0.20</th><td><a href="/react-native/releases/0.20">Docs</a></td><td><a href="https://github.com/facebook/react-native/releases/tag/v0.20.0">Release Notes</a></td></tr><tr><th>0.19</th><td><a href="/react-native/releases/0.19">Docs</a></td><td><a href="https://github.com/facebook/react-native/releases/tag/v0.19.0">Release Notes</a></td></tr><tr><th>0.18</th><td><a href="/react-native/releases/0.18">Docs</a></td><td><a href="https://github.com/facebook/react-native/releases/tag/v0.18.0">Release Notes</a></td></tr></tbody></table></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
@@ -14,6 +14,6 @@
apiKey: '2c98749b4a1e588efec53b2acec13025',
indexName: 'react-native-versions',
inputSelector: '#algolia-doc-search',
algoliaOptions: { facetFilters: [ "tags:master" ], hitsPerPage: 5 }
algoliaOptions: { facetFilters: [ "tags:0.29" ], hitsPerPage: 5 }
});
</script><script src="js/scripts.js"></script></body></html>