kylefang/react-native-paper
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native-paper.git synced 2026-06-12 17:18:12 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
de39bfb82fe47deb0aee02a24b2d666fe9f46529
react-native-paper/bottom-navigation.html
Circle CI de39bfb82f Deploy to GitHub Pages: 2d7f50ce08
2018-09-04 13:03:07 +00:00

138 lines
34 KiB
HTML
Raw Blame History

<html lang="en" data-reactroot=""><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/><meta name="mobile-web-app-capable" content="yes"/><meta name="apple-mobile-web-app-capable" content="yes"/><meta name="description" content="Bottom navigation provides quick navigation between top-level views of an app with a bottom tab bar."/><meta name="twitter:card" content="summary"/><meta name="twitter:title" content="BottomNavigation"/><meta name="twitter:description" content="Bottom navigation provides quick navigation between top-level views of an app with a bottom tab bar."/><meta property="og:type" content="website"/><meta property="og:title" content="BottomNavigation"/><meta property="og:description" content="Bottom navigation provides quick navigation between top-level views of an app with a bottom tab bar."/><title>BottomNavigation</title><link type="text/css" rel="stylesheet" href="app.css"/></head><body><div id='root'><div class="_wrapper__1nbmuhq" data-reactroot=""><aside class="_sidebar__1gt5k1p"><input type="checkbox" class="_menuButton__1gt5k1p" id="slide-sidebar" role="button"/><label class="_menuIcon__1gt5k1p" for="slide-sidebar">☰</label><div class="_menu__1gt5k1p"><input type="search" value="" placeholder="Filter…" class="_searchbar__1gt5k1p"/><nav class="_navigation__1gt5k1p"><a class="_link__1gt5k1p" href="index.html">Home</a><a class="_link__1gt5k1p" href="showcase.html">Showcase</a><a class="_link__1gt5k1p" href="getting-started.html">Getting Started</a><a class="_link__1gt5k1p" href="theming.html">Theming</a><a class="_link__1gt5k1p" href="icons.html">Icons</a><a class="_link__1gt5k1p" href="contributing.html">Contributing</a><hr class="_separator__1gt5k1p"/><div><div class="_row__1gt5k1p"><a class="_link__1gt5k1p" href="appbar.html">Appbar</a><button class="_buttonIcon__1gt5k1p _expandedIcon__1gt5k1p" style="opacity:0"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div class="_sectionItems__1gt5k1p _sectionItemsVisible__1gt5k1p"><a class="_link__1gt5k1p" href="appbar-action.html">Appbar.Action</a><a class="_link__1gt5k1p" href="appbar-back-action.html">Appbar.BackAction</a><a class="_link__1gt5k1p" href="appbar-content.html">Appbar.Content</a><a class="_link__1gt5k1p" href="appbar-header.html">Appbar.Header</a></div></div><a class="_link__1gt5k1p _active__1gt5k1p" href="bottom-navigation.html">BottomNavigation</a><a class="_link__1gt5k1p" href="button.html">Button</a><a class="_link__1gt5k1p" href="caption.html">Caption</a><div><div class="_row__1gt5k1p"><a class="_link__1gt5k1p" href="card.html">Card</a><button class="_buttonIcon__1gt5k1p _expandedIcon__1gt5k1p" style="opacity:0"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div class="_sectionItems__1gt5k1p _sectionItemsVisible__1gt5k1p"><a class="_link__1gt5k1p" href="card-actions.html">Card.Actions</a><a class="_link__1gt5k1p" href="card-content.html">Card.Content</a><a class="_link__1gt5k1p" href="card-cover.html">Card.Cover</a></div></div><div><div class="_row__1gt5k1p"><a class="_link__1gt5k1p" href="checkbox.html">Checkbox</a><button class="_buttonIcon__1gt5k1p _expandedIcon__1gt5k1p" style="opacity:0"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div class="_sectionItems__1gt5k1p _sectionItemsVisible__1gt5k1p"><a class="_link__1gt5k1p" href="checkbox-android.html">Checkbox.Android</a><a class="_link__1gt5k1p" href="checkbox-ios.html">Checkbox.IOS</a></div></div><a class="_link__1gt5k1p" href="chip.html">Chip</a><div><div class="_row__1gt5k1p"><a class="_link__1gt5k1p" href="dialog.html">Dialog</a><button class="_buttonIcon__1gt5k1p _expandedIcon__1gt5k1p" style="opacity:0"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div class="_sectionItems__1gt5k1p _sectionItemsVisible__1gt5k1p"><a class="_link__1gt5k1p" href="dialog-actions.html">Dialog.Actions</a><a class="_link__1gt5k1p" href="dialog-content.html">Dialog.Content</a><a class="_link__1gt5k1p" href="dialog-scroll-area.html">Dialog.ScrollArea</a><a class="_link__1gt5k1p" href="dialog-title.html">Dialog.Title</a></div></div><a class="_link__1gt5k1p" href="divider.html">Divider</a><div><div class="_row__1gt5k1p"><a class="_link__1gt5k1p" href="">Drawer</a><button class="_buttonIcon__1gt5k1p _expandedIcon__1gt5k1p" style="opacity:0"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div class="_sectionItems__1gt5k1p _sectionItemsVisible__1gt5k1p"><a class="_link__1gt5k1p" href="drawer-item.html">Drawer.Item</a><a class="_link__1gt5k1p" href="drawer-section.html">Drawer.Section</a></div></div><div><div class="_row__1gt5k1p"><a class="_link__1gt5k1p" href="fab.html">FAB</a><button class="_buttonIcon__1gt5k1p _expandedIcon__1gt5k1p" style="opacity:0"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div class="_sectionItems__1gt5k1p _sectionItemsVisible__1gt5k1p"><a class="_link__1gt5k1p" href="fab-group.html">FAB.Group</a></div></div><a class="_link__1gt5k1p" href="headline.html">Headline</a><a class="_link__1gt5k1p" href="helper-text.html">HelperText</a><a class="_link__1gt5k1p" href="icon-button.html">IconButton</a><div><div class="_row__1gt5k1p"><a class="_link__1gt5k1p" href="">List</a><button class="_buttonIcon__1gt5k1p _expandedIcon__1gt5k1p" style="opacity:0"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div class="_sectionItems__1gt5k1p _sectionItemsVisible__1gt5k1p"><a class="_link__1gt5k1p" href="list-accordion.html">List.Accordion</a><a class="_link__1gt5k1p" href="list-icon.html">List.Icon</a><a class="_link__1gt5k1p" href="list-item.html">List.Item</a><a class="_link__1gt5k1p" href="list-section.html">List.Section</a></div></div><a class="_link__1gt5k1p" href="modal.html">Modal</a><a class="_link__1gt5k1p" href="paragraph.html">Paragraph</a><div><div class="_row__1gt5k1p"><a class="_link__1gt5k1p" href="portal.html">Portal</a><button class="_buttonIcon__1gt5k1p _expandedIcon__1gt5k1p" style="opacity:0"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div class="_sectionItems__1gt5k1p _sectionItemsVisible__1gt5k1p"><a class="_link__1gt5k1p" href="portal-host.html">Portal.Host</a></div></div><a class="_link__1gt5k1p" href="progress-bar.html">ProgressBar</a><div><div class="_row__1gt5k1p"><a class="_link__1gt5k1p" href="radio-button.html">RadioButton</a><button class="_buttonIcon__1gt5k1p _expandedIcon__1gt5k1p" style="opacity:0"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div class="_sectionItems__1gt5k1p _sectionItemsVisible__1gt5k1p"><a class="_link__1gt5k1p" href="radio-button-android.html">RadioButton.Android</a><a class="_link__1gt5k1p" href="radio-button-group.html">RadioButton.Group</a><a class="_link__1gt5k1p" href="radio-button-ios.html">RadioButton.IOS</a></div></div><a class="_link__1gt5k1p" href="searchbar.html">Searchbar</a><a class="_link__1gt5k1p" href="snackbar.html">Snackbar</a><a class="_link__1gt5k1p" href="subheading.html">Subheading</a><a class="_link__1gt5k1p" href="surface.html">Surface</a><a class="_link__1gt5k1p" href="switch.html">Switch</a><a class="_link__1gt5k1p" href="text.html">Text</a><a class="_link__1gt5k1p" href="text-input.html">TextInput</a><a class="_link__1gt5k1p" href="title.html">Title</a><a class="_link__1gt5k1p" href="touchable-ripple.html">TouchableRipple</a></nav></div></aside><div class="_container__z02bld"><main class="_content__z02bld"><div class="_container__vv20rl"><h1 class="_title__vv20rl">BottomNavigation</h1><div class="_markdown__vv20rl _markdown__1e8xr4b"><p>Bottom navigation provides quick navigation between top-level views of an app with a bottom tab bar.
It is primarily designed for use on mobile.</p>
<p>For integration with React Navigation, you can use <a href="https://github.com/react-navigation/react-navigation-material-bottom-tab-navigator">react-navigation-material-bottom-tab-navigator</a>.</p>
<div class="screenshots">
<img class="medium" src="screenshots/bottom-navigation.gif" />
</div>
<h2>Usage</h2>
<pre><code class="language-js"><span class="token keyword keyword-import" >import</span> <span class="token operator" >*</span> <span class="token keyword keyword-as" >as</span> React <span class="token keyword keyword-from" >from</span> <span class="token string" >'react'</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span> BottomNavigation<span class="token punctuation" >,</span> Text <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >'react-native-paper'</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> MusicRoute <span class="token operator" >=</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=</span><span class="token operator" >&gt;</span> <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Text</span><span class="token punctuation" >&gt;</span></span>Music<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>Text</span><span class="token punctuation" >&gt;</span></span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> AlbumsRoute <span class="token operator" >=</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=</span><span class="token operator" >&gt;</span> <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Text</span><span class="token punctuation" >&gt;</span></span>Albums<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>Text</span><span class="token punctuation" >&gt;</span></span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> RecentsRoute <span class="token operator" >=</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=</span><span class="token operator" >&gt;</span> <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Text</span><span class="token punctuation" >&gt;</span></span>Recents<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>Text</span><span class="token punctuation" >&gt;</span></span><span class="token punctuation" >;</span>
<span class="token keyword keyword-export" >export</span> <span class="token keyword keyword-default" >default</span> <span class="token keyword keyword-class" >class</span> <span class="token class-name" >MyComponent</span> <span class="token keyword keyword-extends" >extends</span> <span class="token class-name" >React<span class="token punctuation" >.</span>Component</span> <span class="token punctuation brackets-braces" >{</span>
state <span class="token operator" >=</span> <span class="token punctuation brackets-braces" >{</span>
index<span class="token punctuation" >:</span> <span class="token number" >0</span><span class="token punctuation" >,</span>
routes<span class="token punctuation" >:</span> <span class="token punctuation brackets-square" >[</span>
<span class="token punctuation brackets-braces" >{</span> key<span class="token punctuation" >:</span> <span class="token string" >'music'</span><span class="token punctuation" >,</span> title<span class="token punctuation" >:</span> <span class="token string" >'Music'</span><span class="token punctuation" >,</span> icon<span class="token punctuation" >:</span> <span class="token string" >'queue-music'</span> <span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >{</span> key<span class="token punctuation" >:</span> <span class="token string" >'albums'</span><span class="token punctuation" >,</span> title<span class="token punctuation" >:</span> <span class="token string" >'Albums'</span><span class="token punctuation" >,</span> icon<span class="token punctuation" >:</span> <span class="token string" >'album'</span> <span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >{</span> key<span class="token punctuation" >:</span> <span class="token string" >'recents'</span><span class="token punctuation" >,</span> title<span class="token punctuation" >:</span> <span class="token string" >'Recents'</span><span class="token punctuation" >,</span> icon<span class="token punctuation" >:</span> <span class="token string" >'history'</span> <span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation" >]</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >;</span>
_handleIndexChange <span class="token operator" >=</span> index <span class="token operator" >=</span><span class="token operator" >&gt;</span> <span class="token keyword keyword-this" >this</span><span class="token punctuation" >.</span><span class="token function" >setState</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> index <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
_renderScene <span class="token operator" >=</span> BottomNavigation<span class="token punctuation" >.</span><span class="token function" >SceneMap</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span>
music<span class="token punctuation" >:</span> MusicRoute<span class="token punctuation" >,</span>
albums<span class="token punctuation" >:</span> AlbumsRoute<span class="token punctuation" >,</span>
recents<span class="token punctuation" >:</span> RecentsRoute<span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token function" >render</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-return" >return</span> <span class="token punctuation brackets-parentheses" >(</span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>BottomNavigation</span>
<span class="token attr-name" >navigationState</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation brackets-braces" >{</span><span class="token keyword keyword-this" >this</span><span class="token punctuation" >.</span>state<span class="token punctuation brackets-braces" >}</span></span>
<span class="token attr-name" >onIndexChange</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation brackets-braces" >{</span><span class="token keyword keyword-this" >this</span><span class="token punctuation" >.</span>_handleIndexChange<span class="token punctuation brackets-braces" >}</span></span>
<span class="token attr-name" >renderScene</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation brackets-braces" >{</span><span class="token keyword keyword-this" >this</span><span class="token punctuation" >.</span>_renderScene<span class="token punctuation brackets-braces" >}</span></span>
<span class="token punctuation" >/&gt;</span></span>
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
</div><h2 class="_propsHeader__vv20rl">Props</h2><div class="_propInfo__vv20rl"><a class="_propLabel__vv20rl" name="shifting" href="#shifting"><code>shifting</code></a><div class="_propItem__vv20rl"><span>Type: </span><code>boolean</code></div><div class="_propItem__vv20rl _markdown__vv20rl _markdown__1e8xr4b"><p>Whether the shifting style is used, the active tab appears wider and the inactive tabs won't have a label.
By default, this is <code>true</code> when you have more than 3 tabs.</p>
</div></div><div class="_propInfo__vv20rl"><a class="_propLabel__vv20rl" name="labeled" href="#labeled"><code>labeled</code></a><div class="_propItem__vv20rl"><span>Type: </span><code>boolean</code></div><div class="_propItem__vv20rl"><span>Default value: </span><code>true</code></div><div class="_propItem__vv20rl _markdown__vv20rl _markdown__1e8xr4b"><p>Whether to show labels in tabs. When <code>false</code>, only icons will be displayed.</p>
</div></div><div class="_propInfo__vv20rl"><a class="_propLabel__vv20rl" name="navigationState" href="#navigationState"><code>navigationState</code> (required)</a><div class="_propItem__vv20rl"><span>Type: </span><code>NavigationState&lt;T&gt;</code></div><div class="_propItem__vv20rl _markdown__vv20rl _markdown__1e8xr4b"><p>State for the bottom navigation. The state should contain the following properties:</p>
<ul>
<li><code>index</code>: a number reprsenting the index of the active route in the <code>routes</code> array</li>
<li><code>routes</code>: an array containing a list of route objects used for rendering the tabs</li>
</ul>
<p>Each route object should contain the following properties:</p>
<ul>
<li><code>key</code>: a unique key to identify the route (required)</li>
<li><code>title</code>: title of the route to use as the tab label</li>
<li><code>icon</code>: icon to use as the tab icon, can be a string, an image source or a react component</li>
<li><code>color</code>: color to use as background color for shifting bottom navigation</li>
<li><code>accessibilityLabel</code>: accessibility label for the tab button</li>
<li><code>testID</code>: test id for the tab button</li>
</ul>
<p>Example:</p>
<pre><code class="language-js"><span class="token punctuation brackets-braces" >{</span>
index<span class="token punctuation" >:</span> <span class="token number" >1</span><span class="token punctuation" >,</span>
routes<span class="token punctuation" >:</span> <span class="token punctuation brackets-square" >[</span>
<span class="token punctuation brackets-braces" >{</span> key<span class="token punctuation" >:</span> <span class="token string" >'music'</span><span class="token punctuation" >,</span> title<span class="token punctuation" >:</span> <span class="token string" >'Music'</span><span class="token punctuation" >,</span> icon<span class="token punctuation" >:</span> <span class="token string" >'queue-music'</span><span class="token punctuation" >,</span> color<span class="token punctuation" >:</span> <span class="token string" >'#3F51B5'</span> <span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >{</span> key<span class="token punctuation" >:</span> <span class="token string" >'albums'</span><span class="token punctuation" >,</span> title<span class="token punctuation" >:</span> <span class="token string" >'Albums'</span><span class="token punctuation" >,</span> icon<span class="token punctuation" >:</span> <span class="token string" >'album'</span><span class="token punctuation" >,</span> color<span class="token punctuation" >:</span> <span class="token string" >'#009688'</span> <span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >{</span> key<span class="token punctuation" >:</span> <span class="token string" >'recents'</span><span class="token punctuation" >,</span> title<span class="token punctuation" >:</span> <span class="token string" >'Recents'</span><span class="token punctuation" >,</span> icon<span class="token punctuation" >:</span> <span class="token string" >'history'</span><span class="token punctuation" >,</span> color<span class="token punctuation" >:</span> <span class="token string" >'#795548'</span> <span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >{</span> key<span class="token punctuation" >:</span> <span class="token string" >'purchased'</span><span class="token punctuation" >,</span> title<span class="token punctuation" >:</span> <span class="token string" >'Purchased'</span><span class="token punctuation" >,</span> icon<span class="token punctuation" >:</span> <span class="token string" >'shopping-cart'</span><span class="token punctuation" >,</span> color<span class="token punctuation" >:</span> <span class="token string" >'#607D8B'</span> <span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation" >]</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
<p><code>BottomNavigation</code> is a controlled component, which means the <code>index</code> needs to be updated via the <code>onIndexChange</code> callback.</p>
</div></div><div class="_propInfo__vv20rl"><a class="_propLabel__vv20rl" name="onIndexChange" href="#onIndexChange"><code>onIndexChange</code> (required)</a><div class="_propItem__vv20rl"><span>Type: </span><code>(index: number) =&gt; mixed</code></div><div class="_propItem__vv20rl _markdown__vv20rl _markdown__1e8xr4b"><p>Callback which is called on tab change, receives the index of the new tab as argument.
The navigation state needs to be updated when it's called, otherwise the change is dropped.</p>
</div></div><div class="_propInfo__vv20rl"><a class="_propLabel__vv20rl" name="renderScene" href="#renderScene"><code>renderScene</code> (required)</a><div class="_propItem__vv20rl"><span>Type: </span><code>(props: {
route: T,
jumpTo: (key: string) =&gt; mixed,
}) =&gt; ?React.Node</code></div><div class="_propItem__vv20rl _markdown__vv20rl _markdown__1e8xr4b"><p>Callback which returns a react element to render as the page for the tab. Receives an object containing the route as the argument:</p>
<pre><code class="language-js">renderScene <span class="token operator" >=</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> route<span class="token punctuation" >,</span> jumpTo <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=</span><span class="token operator" >&gt;</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-switch" >switch</span> <span class="token punctuation brackets-parentheses" >(</span>route<span class="token punctuation" >.</span>key<span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-case" >case</span> <span class="token string" >'music'</span><span class="token punctuation" >:</span>
<span class="token keyword keyword-return" >return</span> <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>MusicRoute</span> <span class="token attr-name" >jumpTo</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation brackets-braces" >{</span>jumpTo<span class="token punctuation brackets-braces" >}</span></span> <span class="token punctuation" >/&gt;</span></span><span class="token punctuation" >;</span>
<span class="token keyword keyword-case" >case</span> <span class="token string" >'albums'</span><span class="token punctuation" >:</span>
<span class="token keyword keyword-return" >return</span> <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>AlbumsRoute</span> <span class="token attr-name" >jumpTo</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation brackets-braces" >{</span>jumpTo<span class="token punctuation brackets-braces" >}</span></span> <span class="token punctuation" >/&gt;</span></span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
<p>Pages are lazily rendered, which means that a page will be rendered the first time you navigate to it.
After initial render, all the pages stay rendered to preserve their state.</p>
<p>You need to make sure that your individual routes implement a <code>shouldComponentUpdate</code> to improve the performance.
To make it easier to specify the components, you can use the <code>SceneMap</code> helper:</p>
<pre><code class="language-js">renderScene <span class="token operator" >=</span> BottomNavigation<span class="token punctuation" >.</span><span class="token function" >SceneMap</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span>
music<span class="token punctuation" >:</span> MusicRoute<span class="token punctuation" >,</span>
albums<span class="token punctuation" >:</span> AlbumsRoute<span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
</code></pre>
<p>Specifying the components this way is easier and takes care of implementing a <code>shouldComponentUpdate</code> method.
Each component will receive the current route and a <code>jumpTo</code> method as it's props.
The <code>jumpTo</code> method can be used to navigate to other tabs programmatically:</p>
<pre><code class="language-js"><span class="token keyword keyword-this" >this</span><span class="token punctuation" >.</span>props<span class="token punctuation" >.</span><span class="token function" >jumpTo</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'albums'</span><span class="token punctuation brackets-parentheses" >)</span>
</code></pre>
</div></div><div class="_propInfo__vv20rl"><a class="_propLabel__vv20rl" name="renderIcon" href="#renderIcon"><code>renderIcon</code></a><div class="_propItem__vv20rl"><span>Type: </span><code>(props: {
route: T,
focused: boolean,
color: string,
}) =&gt; React.Node</code></div><div class="_propItem__vv20rl _markdown__vv20rl _markdown__1e8xr4b"><p>Callback which returns a React Element to be used as tab icon.</p>
</div></div><div class="_propInfo__vv20rl"><a class="_propLabel__vv20rl" name="renderLabel" href="#renderLabel"><code>renderLabel</code></a><div class="_propItem__vv20rl"><span>Type: </span><code>(props: {
route: T,
focused: boolean,
color: string,
}) =&gt; React.Node</code></div><div class="_propItem__vv20rl _markdown__vv20rl _markdown__1e8xr4b"><p>Callback which React Element to be used as tab label.</p>
</div></div><div class="_propInfo__vv20rl"><a class="_propLabel__vv20rl" name="getLabelText" href="#getLabelText"><code>getLabelText</code></a><div class="_propItem__vv20rl"><span>Type: </span><code>(props: { route: T }) =&gt; string</code></div><div class="_propItem__vv20rl _markdown__vv20rl _markdown__1e8xr4b"><p>Get label text for the tab, uses <code>route.title</code> by default. Use <code>renderLabel</code> to replace label component.</p>
</div></div><div class="_propInfo__vv20rl"><a class="_propLabel__vv20rl" name="getAccessibilityLabel" href="#getAccessibilityLabel"><code>getAccessibilityLabel</code></a><div class="_propItem__vv20rl"><span>Type: </span><code>(props: { route: T }) =&gt; ?string</code></div><div class="_propItem__vv20rl _markdown__vv20rl _markdown__1e8xr4b"><p>Get accessibility label for the tab button. This is read by the screen reader when the user taps the tab.
Uses <code>route.accessibilityLabel</code> by default.</p>
</div></div><div class="_propInfo__vv20rl"><a class="_propLabel__vv20rl" name="getTestID" href="#getTestID"><code>getTestID</code></a><div class="_propItem__vv20rl"><span>Type: </span><code>(props: { route: T }) =&gt; ?string</code></div><div class="_propItem__vv20rl _markdown__vv20rl _markdown__1e8xr4b"><p>Get the id to locate this tab button in tests, uses <code>route.testID</code> by default.</p>
</div></div><div class="_propInfo__vv20rl"><a class="_propLabel__vv20rl" name="getColor" href="#getColor"><code>getColor</code></a><div class="_propItem__vv20rl"><span>Type: </span><code>(props: { route: T }) =&gt; string</code></div><div class="_propItem__vv20rl _markdown__vv20rl _markdown__1e8xr4b"><p>Get color for the tab, uses <code>route.color</code> by default.</p>
</div></div><div class="_propInfo__vv20rl"><a class="_propLabel__vv20rl" name="onTabPress" href="#onTabPress"><code>onTabPress</code></a><div class="_propItem__vv20rl"><span>Type: </span><code>(props: { route: T }) =&gt; mixed</code></div><div class="_propItem__vv20rl _markdown__vv20rl _markdown__1e8xr4b"><p>Function to execute on tab press. It receives the route for the pressed tab, useful for things like scroll to top.</p>
</div></div><div class="_propInfo__vv20rl"><a class="_propLabel__vv20rl" name="activeColor" href="#activeColor"><code>activeColor</code></a><div class="_propItem__vv20rl"><span>Type: </span><code>string</code></div><div class="_propItem__vv20rl _markdown__vv20rl _markdown__1e8xr4b"><p>Custom color for icon and label in the active tab.</p>
</div></div><div class="_propInfo__vv20rl"><a class="_propLabel__vv20rl" name="inactiveColor" href="#inactiveColor"><code>inactiveColor</code></a><div class="_propItem__vv20rl"><span>Type: </span><code>string</code></div><div class="_propItem__vv20rl _markdown__vv20rl _markdown__1e8xr4b"><p>Custom color for icon and label in the inactive tab.</p>
</div></div><div class="_propInfo__vv20rl"><a class="_propLabel__vv20rl" name="barStyle" href="#barStyle"><code>barStyle</code></a><div class="_propItem__vv20rl"><span>Type: </span><code>any</code></div><div class="_propItem__vv20rl _markdown__vv20rl _markdown__1e8xr4b"><p>Style for the bottom navigation bar.
You can set a bottom padding here if you have a translucent navigation bar on Android:</p>
<pre><code class="language-js">barStyle<span class="token operator" >=</span><span class="token punctuation brackets-braces" >{</span><span class="token punctuation brackets-braces" >{</span> paddingBottom<span class="token punctuation" >:</span> <span class="token number" >48</span> <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-braces" >}</span>
</code></pre>
</div></div><div class="_propInfo__vv20rl"><a class="_propLabel__vv20rl" name="style" href="#style"><code>style</code></a><div class="_propItem__vv20rl"><span>Type: </span><code>any</code></div></div><div class="_propInfo__vv20rl"><a class="_propLabel__vv20rl" name="theme" href="#theme"><code>theme</code></a><div class="_propItem__vv20rl"><span>Type: </span><code>Theme</code></div><div class="_propItem__vv20rl _markdown__vv20rl _markdown__1e8xr4b"></div></div><h2 class="_propsHeader__vv20rl">Static properties</h2><div class="_propInfo__vv20rl"><a class="_propLabel__vv20rl" name="SceneMap" href="#SceneMap"><code>SceneMap</code></a><div class="_propItem__vv20rl"><span>Type: </span><code>Function</code></div><div class="_propItem__vv20rl"><span>Params: </span><code>scenes: {
[key: string]: React.ComponentType&lt;{
route: T,
jumpTo: (key: string) =&gt; mixed,
}&gt;,
}</code></div><div class="_propItem__vv20rl _markdown__vv20rl _markdown__1e8xr4b"><p>Function which takes a map of route keys to components.
Pure components are used to minmize re-rendering of the pages.
This drastically improves the animation performance.</p>
</div></div></div></main></div></div></div>
<script>
window.__INITIAL_PATH__ = 'bottom-navigation';
</script>
<script src="app.bundle.js"></script><script src="scripts/snack.js"></script></body></html>
Reference in New Issue View Git Blame Copy Permalink