Updated docs for next

This commit is contained in:
Website Deployment Script committed 2016-06-23 02:30:00 +00:00
1 parent 4cbcc23006
commit d7043ada97
1 file changed
+123 -42
+123 -42
View File
@@ -1,48 +1,129 @@
<!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/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="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/basics-components.html">Components</a></li><li><a style="margin-left:0;" class="" href="docs/basics-component-text.html">Text</a></li><li><a style="margin-left:0;" class="" href="docs/basics-component-image.html">Image</a></li><li><a style="margin-left:0;" class="" href="docs/basics-component-view.html">View</a></li><li><a style="margin-left:0;" class="" href="docs/basics-component-textinput.html">TextInput</a></li><li><a style="margin-left:0;" class="" href="docs/basics-component-scrollview.html">ScrollView</a></li><li><a style="margin-left:0;" class="" href="docs/basics-component-listview.html">ListView</a></li><li><a style="margin-left:0;" class="" href="docs/network.html">Network</a></li><li><a style="margin-left:0;" class="" href="docs/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/style.html">Style</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">Navigator Comparison</a></li><li><a style="margin-left:0;" class="" href="docs/known-issues.html">Known Issues</a></li><li><a style="margin-left:0;" class="" href="docs/performance.html">Performance</a></li><li><a style="margin-left:0;" class="" href="docs/upgrading.html">Upgrading</a></li><li><a style="margin-left:0;" class="" href="docs/platform-specific-code.html">Platform Specific Code</a></li><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">NatiLine truncated
accomplish this, provide route objects to the navigator to identify each
scene, and also a <code>renderScene</code> function that the navigator can use to
render the scene for a given route.</p><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. See
<code>Navigator.SceneConfigs</code> for default animations and more info on
scene config options.</p><h3><a class="anchor" name="basic-usage"></a>Basic Usage <a class="hash-link" href="docs/navigator.html#basic-usage">#</a></h3><div class="prism language-javascript"> &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;My 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>
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;MySceneComponent
name<span class="token operator">=</span><span class="token punctuation">{</span>route<span class="token punctuation">.</span>name<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>
<span class="token keyword">var</span> 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>
name<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>
<!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/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="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/basics-components.html">Components</a></li><li><a style="margin-left:0;" class="" href="docs/basics-component-text.html">Text</a></li><li><a style="margin-left:0;" class="" href="docs/basics-component-image.html">Image</a></li><li><a style="margin-left:0;" class="" href="docs/basics-component-view.html">View</a></li><li><a style="margin-left:0;" class="" href="docs/basics-component-textinput.html">TextInput</a></li><li><a style="margin-left:0;" class="" href="docs/basics-component-scrollview.html">ScrollView</a></li><li><a style="margin-left:0;" class="" href="docs/basics-component-listview.html">ListView</a></li><li><a style="margin-left:0;" class="" href="docs/network.html">Network</a></li><li><a style="margin-left:0;" class="" href="docs/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/style.html">Style</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">Navigator Comparison</a></li><li><a style="margin-left:0;" class="" href="docs/known-issues.html">Known Issues</a></li><li><a style="margin-left:0;" class="" href="docs/performance.html">Performance</a></li><li><a style="margin-left:0;" class="" href="docs/upgrading.html">Upgrading</a></li><li><a style="margin-left:0;" class="" href="docs/platform-specific-code.html">Platform Specific Code</a></li><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">NatiLine 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,
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>
<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>
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>
<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
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><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>routes<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">}</span>
initialRouteStack<span class="token operator">=</span><span class="token punctuation">{</span>routes<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;TouchableHighlight onPress<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">===</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">push<span class="token punctuation">(</span></span>routes<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">else</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 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;<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>
<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 the above example, a <code>routes</code> variable is defined with two route objects
representing two scenes. Each route has an <code>index</code> property that is used to
manage the scene being rendered. The <code>renderScene</code> method is changed to
either push or pop the navigator depending on the current route&#x27;s index.
Finally, the <code>Text</code> component in the scene is now wrapped in a
<code>TouchableHighlight</code> component to help trigger the navigator transitions.</p><h3><a class="anchor" name="navigation-bar"></a>Navigation Bar <a class="hash-link" href="docs/navigator.html#navigation-bar">#</a></h3><p>You can optionally pass in your own navigation bar by returning a
<code>Navigator.NavigationBar</code> component to the <code>navigationBar</code> prop in
<code>Navigator</code>. You can configure the navigation bar properties, through
the <code>routeMapper</code> prop. There you set up the left, right, and title
properties of the navigation bar:</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"> // ...
</span> <span class="token punctuation">}</span>
navigationBar<span class="token operator">=</span><span class="token punctuation">{</span>
&lt;Navigator<span class="token punctuation">.</span>NavigationBar
routeMapper<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
LeftButton<span class="token punctuation">:</span> <span class="token punctuation">(</span>route<span class="token punctuation">,</span> navigator<span class="token punctuation">,</span> index<span class="token punctuation">,</span> navState<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">return</span> <span class="token punctuation">(</span>&lt;Text<span class="token operator">&gt;</span>Cancel&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>
RightButton<span class="token punctuation">:</span> <span class="token punctuation">(</span>route<span class="token punctuation">,</span> navigator<span class="token punctuation">,</span> index<span class="token punctuation">,</span> navState<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">return</span> <span class="token punctuation">(</span>&lt;Text<span class="token operator">&gt;</span>Done&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>
Title<span class="token punctuation">:</span> <span class="token punctuation">(</span>route<span class="token punctuation">,</span> navigator<span class="token punctuation">,</span> index<span class="token punctuation">,</span> navState<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">return</span> <span class="token punctuation">(</span>&lt;Text<span class="token operator">&gt;</span>Awesome Nav Bar&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>
<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>backgroundColor<span class="token punctuation">:</span> <span class="token string">&#x27;gray&#x27;</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></div><p>When configuring the left, right, and title items for the navigation bar,
you have access to info such as the current route object and navigation
state. This allows you to customize the title for each scene as well as
the buttons. For example, you can choose to hide the left button for one of
the scenes.</p><p>Typically you want buttons to represent the left and right buttons. Building
on the previous example, you can set this up as follows:</p><div class="prism language-javascript">LeftButton<span class="token punctuation">:</span> <span class="token punctuation">(</span>route<span class="token punctuation">,</span> navigator<span class="token punctuation">,</span> index<span class="token punctuation">,</span> navState<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">===</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
&lt;TouchableHighlight onPress<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> 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 operator">&gt;</span>
&lt;Text<span class="token operator">&gt;</span>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>
<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></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/navigator.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="configurescene"></a>configureScene <span class="propType">function</span> <a class="hash-link" href="docs/navigator.html#configurescene">#</a></h4><div><p>Optional function that allows configuration about scene animations and
gestures. Will be invoked with the route and the routeStack and should
return a scene configuration object</p><div class="prism language-javascript"><span class="token punctuation">(</span>route<span class="token punctuation">,</span> routeStack<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> Navigator<span class="token punctuation">.</span>SceneConfigs<span class="token punctuation">.</span>FloatFromRight</div><p>Available options are:</p><ul><li>Navigator.SceneConfigs.PushFromRight (default)</li><li>Navigator.SceneConfigs.FloatFromRight</li><li>Navigator.SceneConfigs.FloatFromLeft</li><li>Navigator.SceneConfigs.FloatFromBottom</li><li>Navigator.SceneConfigs.FloatFromBottomAndroid</li><li>Navigator.SceneConfigs.FadeAndroid</li><li>Navigator.SceneConfigs.HorizontalSwipeJump</li><li>Navigator.SceneConfigs.HorizontalSwipeJumpFromRight</li><li>Navigator.SceneConfigs.VerticalUpSwipeJump</li><li>Navigator.SceneConfigs.VerticalDownSwipeJump</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="initialroute"></a>initialRoute <span class="propType">object</span> <a class="hash-link" href="docs/navigator.html#initialroute">#</a></h4><div><p>Specify a route to start on. A route is an object that the navigator
will use to identify each scene to render. <code>initialRoute</code> must be
a route in the <code>initialRouteStack</code> if both props are provided. The
<code>initialRoute</code> will default to the last item in the <code>initialRouteStack</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="initialroutestack"></a>initialRouteStack <span class="propType"><span>[object]</span></span> <a class="hash-link" href="docs/navigator.html#initialroutestack">#</a></h4><div><p>Provide a set of routes to initially mount. Required if no initialRoute
is provided. Otherwise, it will default to an array containing only the
<code>initialRoute</code></p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="navigationbar"></a>navigationBar <span class="propType">node</span> <a class="hash-link" href="docs/navigator.html#navigationbar">#</a></h4><div><p>Optionally provide a component as navigation bar that persists across scene
transitions. The component will receive two props: <code>navigator</code> and <code>navState</code>.
It will be rerendered when the routes change.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="navigator"></a>navigator <span class="propType">object</span> <a class="hash-link" href="docs/navigator.html#navigator">#</a></h4><div><p>Optionally provide the navigator object from a parent Navigator</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="ondidfocus"></a>onDidFocus <span class="propType">function</span> <a class="hash-link" href="docs/navigator.html#ondidfocus">#</a></h4><div><p>Will be called with the new route of each scene after the transition is
complete or after the initial mounting</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onwillfocus"></a>onWillFocus <span class="propType">function</span> <a class="hash-link" href="docs/navigator.html#onwillfocus">#</a></h4><div><p>Will emit the target route upon mounting and before each nav transition</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="renderscene"></a>renderScene <span class="propType">function</span> <a class="hash-link" href="docs/navigator.html#renderscene">#</a></h4><div><p>Required function which renders the scene for a given route. Will be
invoked with the route and the navigator object</p><div class="prism language-javascript"><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;MySceneComponent title<span class="token operator">=</span><span class="token punctuation">{</span>route<span class="token punctuation">.</span>title<span class="token punctuation">}</span> navigator<span class="token operator">=</span><span class="token punctuation">{</span>navigator<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="scenestyle"></a>sceneStyle <span class="propType"><a href="docs/view.html#style">View#style</a></span> <a class="hash-link" href="docs/navigator.html#scenestyle">#</a></h4><div><p>Styles to apply to the container of each scene</p></div></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/navigator.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="immediatelyresetroutestack"></a>immediatelyResetRouteStack<span class="propType">(nextRouteStack)</span> <a class="hash-link" href="docs/navigator.html#immediatelyresetroutestack">#</a></h4><div><p>Reset every scene with an array of routes.</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>nextRouteStack<br><br><div><span>RouteStack</span></div></td><td class="description"><div><p>Next route stack to reinitialize. This
doesn&#x27;t accept stack item <code>id</code>s, which implies that all existing items are
destroyed, and then potentially recreated according to <code>routeStack</code>. Does
not animate, immediately replaces and rerenders navigation bar and stack
items.</p></div></td></tr></tbody></table></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="jumpto"></a>jumpTo<span class="propType">(route)</span> <a class="hash-link" href="docs/navigator.html#jumpto">#</a></h4><div><p>Transition to an existing scene without unmounting</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="jumpforward"></a>jumpForward<span class="propType">()</span> <a class="hash-link" href="docs/navigator.html#jumpforward">#</a></h4><div><p>Jump forward to the next scene in the route stack.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="jumpback"></a>jumpBack<span class="propType">()</span> <a class="hash-link" href="docs/navigator.html#jumpback">#</a></h4><div><p>Jump backward without unmounting the current scene.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="push"></a>push<span class="propType">(route)</span> <a class="hash-link" href="docs/navigator.html#push">#</a></h4><div><p>Navigate forward to a new scene, squashing any scenes that you could
<code>jumpForward</code> to.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="pop"></a>pop<span class="propType">()</span> <a class="hash-link" href="docs/navigator.html#pop">#</a></h4><div><p>Transition back and unmount the current scene.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="replaceatindex"></a>replaceAtIndex<span class="propType">(route, index, cb)</span> <a class="hash-link" href="docs/navigator.html#replaceatindex">#</a></h4><div><p>Replace a scene as specified by an index</p><p><code>index</code> specifies the route in the stack that should be replaced.
If it&#x27;s negative, it counts from the back.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="replace"></a>replace<span class="propType">(route)</span> <a class="hash-link" href="docs/navigator.html#replace">#</a></h4><div><p>Replace the current scene with a new route.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="replaceprevious"></a>replacePrevious<span class="propType">(route)</span> <a class="hash-link" href="docs/navigator.html#replaceprevious">#</a></h4><div><p>Replace the previous scene.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="poptotop"></a>popToTop<span class="propType">()</span> <a class="hash-link" href="docs/navigator.html#poptotop">#</a></h4><div><p>Pop to the first scene in the stack, unmounting every other scene.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="poptoroute"></a>popToRoute<span class="propType">(route)</span> <a class="hash-link" href="docs/navigator.html#poptoroute">#</a></h4><div><p>Pop to a particular scene, as specified by its route.
All scenes after it will be unmounted.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="replacepreviousandpop"></a>replacePreviousAndPop<span class="propType">(route)</span> <a class="hash-link" href="docs/navigator.html#replacepreviousandpop">#</a></h4><div><p>Replace the previous scene and pop to it.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="resetto"></a>resetTo<span class="propType">(route)</span> <a class="hash-link" href="docs/navigator.html#resetto">#</a></h4><div><p>Navigate to a new scene and reset route stack.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="getcurrentroutes"></a>getCurrentRoutes<span class="propType">()</span> <a class="hash-link" href="docs/navigator.html#getcurrentroutes">#</a></h4><div><p>Returns the current list of routes.</p></div></div></div></span></div><div class="docs-prevnext"><a class="docs-next" href="docs/navigatorios.html#content">Next →</a></div></div><noscript></noscript></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><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
<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"> // ...
</span> <span class="token punctuation">}</span>
configureScene<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>route<span class="token punctuation">,</span> routeStack<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span>
Navigator<span class="token punctuation">.</span>SceneConfigs<span class="token punctuation">.</span>FloatFromBottom<span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">&gt;</span></div><p>In the above example, the newly pushed scene will float up from the bottom.
See <code>Navigator.SceneConfigs</code> for default animations and more info on
available <a href="/react-native/docs/navigator.html#configurescene" target="">scene config options</a>.</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/navigator.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="configurescene"></a>configureScene <span class="propType">function</span> <a class="hash-link" href="docs/navigator.html#configurescene">#</a></h4><div><p>Optional function where you can configure scene animations and
gestures. Will be invoked with <code>route</code> and <code>routeStack</code> parameters,
where <code>route</code> corresponds to the current scene being rendered by the
<code>Navigator</code> and <code>routeStack</code> is the set of currently mounted routes
that the navigator could transition to.</p><p>The function should return a scene configuration object.</p><div class="prism language-javascript"><span class="token punctuation">(</span>route<span class="token punctuation">,</span> routeStack<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> Navigator<span class="token punctuation">.</span>SceneConfigs<span class="token punctuation">.</span>FloatFromRight</div><p>Available scene configutation options are:</p><ul><li>Navigator.SceneConfigs.PushFromRight (default)</li><li>Navigator.SceneConfigs.FloatFromRight</li><li>Navigator.SceneConfigs.FloatFromLeft</li><li>Navigator.SceneConfigs.FloatFromBottom</li><li>Navigator.SceneConfigs.FloatFromBottomAndroid</li><li>Navigator.SceneConfigs.FadeAndroid</li><li>Navigator.SceneConfigs.HorizontalSwipeJump</li><li>Navigator.SceneConfigs.HorizontalSwipeJumpFromRight</li><li>Navigator.SceneConfigs.VerticalUpSwipeJump</li><li>Navigator.SceneConfigs.VerticalDownSwipeJump</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="initialroute"></a>initialRoute <span class="propType">object</span> <a class="hash-link" href="docs/navigator.html#initialroute">#</a></h4><div><p>The initial route for navigation. A route is an object that the navigator
will use to identify each scene it renders.</p><p>If both <code>initialRoute</code> and <code>initialRouteStack</code> props are passed to
<code>Navigator</code>, then <code>initialRoute</code> must be in a route in
<code>initialRouteStack</code>. If <code>initialRouteStack</code> is passed as a prop but
<code>initialRoute</code> is not, then <code>initialRoute</code> will default internally to
the last item in <code>initialRouteStack</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="initialroutestack"></a>initialRouteStack <span class="propType"><span>[object]</span></span> <a class="hash-link" href="docs/navigator.html#initialroutestack">#</a></h4><div><p>Pass this in to provide a set of routes to initially mount. This prop
is required if <code>initialRoute</code> is not provided to the navigator. If this
prop is not passed in, it will default internally to an array
containing only <code>initialRoute</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="navigationbar"></a>navigationBar <span class="propType">node</span> <a class="hash-link" href="docs/navigator.html#navigationbar">#</a></h4><div><p>Use this to provide an optional component representing a navigation bar
that is persisted across scene transitions. This component will receive
two props: <code>navigator</code> and <code>navState</code> representing the navigator
component and its state. The component is re-rendered when the route
changes.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="navigator"></a>navigator <span class="propType">object</span> <a class="hash-link" href="docs/navigator.html#navigator">#</a></h4><div><p>Optionally pass in the navigator object from a parent <code>Navigator</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="ondidfocus"></a>onDidFocus <span class="propType">function</span> <a class="hash-link" href="docs/navigator.html#ondidfocus">#</a></h4><div><p>Will be called with the new route of each scene after the transition is
complete or after the initial mounting.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onwillfocus"></a>onWillFocus <span class="propType">function</span> <a class="hash-link" href="docs/navigator.html#onwillfocus">#</a></h4><div><p>Pass in a function to get notified with the target route when
the navigator component is mounted and before each navigator transition.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="renderscene"></a>renderScene <span class="propType">function</span> <a class="hash-link" href="docs/navigator.html#renderscene">#</a></h4><div><p>Required function which renders the scene for a given route. Will be
invoked with the <code>route</code> and the <code>navigator</code> object.</p><div class="prism language-javascript"><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;MySceneComponent title<span class="token operator">=</span><span class="token punctuation">{</span>route<span class="token punctuation">.</span>title<span class="token punctuation">}</span> navigator<span class="token operator">=</span><span class="token punctuation">{</span>navigator<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="scenestyle"></a>sceneStyle <span class="propType"><a href="docs/view.html#style">View#style</a></span> <a class="hash-link" href="docs/navigator.html#scenestyle">#</a></h4><div><p>Styles to apply to the container of each scene.</p></div></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/navigator.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="immediatelyresetroutestack"></a>immediatelyResetRouteStack<span class="propType">(nextRouteStack)</span> <a class="hash-link" href="docs/navigator.html#immediatelyresetroutestack">#</a></h4><div><p>Reset every scene with an array of routes.</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>nextRouteStack<br><br><div><span>RouteStack</span></div></td><td class="description"><div><p>Next route stack to reinitialize.
All existing route stacks are destroyed an potentially recreated. There
is no accompanying animation and this method immediately replaces and
re-renders the navigation bar and the stack items.</p></div></td></tr></tbody></table></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="jumpto"></a>jumpTo<span class="propType">(route)</span> <a class="hash-link" href="docs/navigator.html#jumpto">#</a></h4><div><p>Transition to an existing scene without unmounting.</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>route<br><br><div><span>object</span></div></td><td class="description"><div><p>Route to transition to. The specified route must
be in the currently mounted set of routes defined in <code>routeStack</code>.</p></div></td></tr></tbody></table></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="jumpforward"></a>jumpForward<span class="propType">()</span> <a class="hash-link" href="docs/navigator.html#jumpforward">#</a></h4><div><p>Jump forward to the next scene in the route stack.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="jumpback"></a>jumpBack<span class="propType">()</span> <a class="hash-link" href="docs/navigator.html#jumpback">#</a></h4><div><p>Jump backward without unmounting the current scene.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="push"></a>push<span class="propType">(route)</span> <a class="hash-link" href="docs/navigator.html#push">#</a></h4><div><p>Navigate forward to a new scene, squashing any scenes that you could
jump forward to.</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>route<br><br><div><span>object</span></div></td><td class="description"><div><p>Route to push into the navigator stack.</p></div></td></tr></tbody></table></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="pop"></a>pop<span class="propType">()</span> <a class="hash-link" href="docs/navigator.html#pop">#</a></h4><div><p>Transition back and unmount the current scene.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="replaceatindex"></a>replaceAtIndex<span class="propType">(route, index, cb)</span> <a class="hash-link" href="docs/navigator.html#replaceatindex">#</a></h4><div><p>Replace a scene as specified by an index.</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>route<br><br><div><span>object</span></div></td><td class="description"><div><p>Route representing the new scene to render.</p></div></td></tr><tr><td>index<br><br><div><span>number</span></div></td><td class="description"><div><p>The route in the stack that should be replaced.
If negative, it counts from the back of the stack.</p></div></td></tr><tr><td>cb<br><br><div><span>Function</span></div></td><td class="description"><div><p>Callback function when the scene has been replaced.</p></div></td></tr></tbody></table></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="replace"></a>replace<span class="propType">(route)</span> <a class="hash-link" href="docs/navigator.html#replace">#</a></h4><div><p>Replace the current scene with a new route.</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>route<br><br><div><span>object</span></div></td><td class="description"><div><p>Route that replaces the current scene.</p></div></td></tr></tbody></table></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="replaceprevious"></a>replacePrevious<span class="propType">(route)</span> <a class="hash-link" href="docs/navigator.html#replaceprevious">#</a></h4><div><p>Replace the previous scene.</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>route<br><br><div><span>object</span></div></td><td class="description"><div><p>Route that replaces the previous scene.</p></div></td></tr></tbody></table></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="poptotop"></a>popToTop<span class="propType">()</span> <a class="hash-link" href="docs/navigator.html#poptotop">#</a></h4><div><p>Pop to the first scene in the stack, unmounting every other scene.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="poptoroute"></a>popToRoute<span class="propType">(route)</span> <a class="hash-link" href="docs/navigator.html#poptoroute">#</a></h4><div><p>Pop to a particular scene, as specified by its route.
All scenes after it will be unmounted.</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>route<br><br><div><span>object</span></div></td><td class="description"><div><p>Route to pop to.</p></div></td></tr></tbody></table></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="replacepreviousandpop"></a>replacePreviousAndPop<span class="propType">(route)</span> <a class="hash-link" href="docs/navigator.html#replacepreviousandpop">#</a></h4><div><p>Replace the previous scene and pop to it.</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>route<br><br><div><span>object</span></div></td><td class="description"><div><p>Route that replaces the previous scene.</p></div></td></tr></tbody></table></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="resetto"></a>resetTo<span class="propType">(route)</span> <a class="hash-link" href="docs/navigator.html#resetto">#</a></h4><div><p>Navigate to a new scene and reset route stack.</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>route<br><br><div><span>object</span></div></td><td class="description"><div><p>Route to navigate to.</p></div></td></tr></tbody></table></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="getcurrentroutes"></a>getCurrentRoutes<span class="propType">()</span> <a class="hash-link" href="docs/navigator.html#getcurrentroutes">#</a></h4><div><p>Returns the current list of routes.</p></div></div></div></span></div><div class="docs-prevnext"><a class="docs-next" href="docs/navigatorios.html#content">Next →</a></div></div><noscript></noscript></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)