Facebook/react-native
1
0
Fork 0
mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
76ccebcfc1ecd04116dcbb372aa1c31e16066ad6
react-native/docs/toolbarandroid.html
T
Website Deployment Script 95745822b6 Updated docs for 0.25
2016-05-06 16:47:40 +00:00

170 lines
47 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>ToolbarAndroid – React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="ToolbarAndroid – 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/"><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.25</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="docs/getting-started.html" class="active">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-section"><h3>Quick Start</h3><ul><li><a style="margin-left:0;" class="" href="docs/getting-started.html#content">Getting Started</a></li><li><a style="margin-left:0;" class="" href="docs/tutorial.html#content">Tutorial</a></li></ul></div><div class="nav-docs-section"><h3>Community Resources</h3><ul><li><a style="margin-left:0;" class="" href="docs/videos.html#content">Videos</a></li><li><a target="_blank" style="margin-left:0;" class="" href="http://reactnative.cc/">Newsletter</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="docs/style.html#content">Style</a></li><li><a style="margin-left:0;" class="" href="docs/images.html#content">Images</a></li><li><a style="margin-left:0;" class="" href="docs/gesture-responder-system.html#content">Gesture Responder System</a></li><li><a style="margin-left:0;" class="" href="docs/animations.html#content">Animations</a></li><li><a style="margin-left:0;" class="" href="docs/accessibility.html#content">Accessibility</a></li><li><a style="margin-left:0;" class="" href="docs/direct-manipulation.html#content">Direct Manipulation</a></li><li><a style="margin-left:0;" class="" href="docs/debugging.html#content">Debugging</a></li><li><a style="margin-left:0;" class="" href="docs/testing.html#content">Testing</a></li><li><a style="margin-left:0;" class="" href="docs/javascript-environment.html#content">JavaScript Environment</a></li><li><a style="margin-left:0;" class="" href="docs/navigator-comparison.html#content">Navigator Comparison</a></li><li><a style="margin-left:0;" class="" href="docs/known-issues.html#content">Known Issues</a></li><li><a style="margin-left:0;" class="" href="docs/performance.html#content">Performance</a></li><li><a style="margin-left:0;" class="" href="docs/upgrading.html#content">Upgrading</a></li><li><a style="margin-left:0;" class="" href="docs/platform-specific-code.html#content">Platform Specific Code</a></li></ul></div><div class="nav-docs-section"><h3>Guides (iOS)</h3><ul><li><a style="margin-left:0;" class="" href="docs/native-modules-ios.html#content">Native Modules</a></li><li><a style="margin-left:0;" class="" href="docs/native-components-ios.html#content">Native UI Components</a></li><li><a style="margin-left:0;" class="" href="docs/linking-libraries-ios.html#content">Linking Libraries</a></li><li><a style="margin-left:0;" class="" href="docs/running-on-device-ios.html#content">Running On Device</a></li><li><a style="margin-left:0;" class="" href="docs/embedded-app-ios.html#content">Integrating with Existing Apps</a></li><li><a style="margin-left:0;" class="" href="docs/communication-ios.html#content">Communication between native and React Native</a></li></ul></div><div class="nav-docs-section"><h3>Guides (Android)</h3><ul><li><a style="margin-left:0;" class="" href="docs/native-modules-android.html#content">Native Modules</a></li><li><a style="margin-left:0;" class="" href="docs/native-components-android.html#content">Native UI Components</a></li><li><a style="margin-left:0;" class="" href="docs/running-on-device-android.html#content">Running On Device</a></li><li><a style="margin-left:0;" class="" href="docs/embedded-app-android.html#content">Integrating with Existing Apps</a></li><li><a style="margin-left:0;" class="" href="docs/signed-apk-android.html#content">Generating Signed APK</a></li><li><a style="margin-left:0;" class="" href="docs/android-ui-performance.html#content">Profiling Android UI Performance</a></li><li><a style="margin-left:0;" class="" href="docs/android-building-from-source.html#content">Building React Native from source</a></li></ul></div><div class="nav-docs-section"><h3>components</h3><ul><li><a style="margin-left:0;" class="" href="docs/activityindicatorios.html#content">ActivityIndicatorIOS</a></li><li><a style="margin-left:0;" class="" href="docs/datepickerios.html#content">DatePickerIOS</a></li><li><a style="margin-left:0;" class="" href="docs/drawerlayoutandroid.html#content">DrawerLayoutAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/image.html#content">Image</a></li><li><a style="margin-left:0;" class="" href="docs/listview.html#content">ListView</a></li><li><a style="margin-left:0;" class="" href="docs/mapview.html#content">MapView</a></li><li><a style="margin-left:0;" class="" href="docs/modal.html#content">Modal</a></li><li><a style="margin-left:0;" class="" href="docs/navigator.html#content">Navigator</a></li><li><a style="margin-left:0;" class="" href="docs/navigatorios.html#content">NavigatorIOS</a></li><li><a style="margin-left:0;" class="" href="docs/pickerios.html#content">PickerIOS</a></li><li><a style="margin-left:0;" class="" href="docs/picker.html#content">Picker</a></li><li><a style="margin-left:0;" class="" href="docs/progressbarandroid.html#content">ProgressBarAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/progressviewios.html#content">ProgressViewIOS</a></li><li><a style="margin-left:0;" class="" href="docs/refreshcontrol.html#content">RefreshControl</a></li><li><a style="margin-left:0;" class="" href="docs/scrollview.html#content">ScrollView</a></li><li><a style="margin-left:0;" class="" href="docs/segmentedcontrolios.html#content">SegmentedControlIOS</a></li><li><a style="margin-left:0;" class="" href="docs/slider.html#content">Slider</a></li><li><a style="margin-left:0;" class="" href="docs/sliderios.html#content">SliderIOS</a></li><li><a style="margin-left:0;" class="" href="docs/statusbar.html#content">StatusBar</a></li><li><a style="margin-left:0;" class="" href="docs/switch.html#content">Switch</a></li><li><a style="margin-left:0;" class="" href="docs/tabbarios.html#content">TabBarIOS</a></li><li><a style="margin-left:0;" class="" href="docs/tabbarios-item.html#content">TabBarIOS.Item</a></li><li><a style="margin-left:0;" class="" href="docs/text.html#content">Text</a></li><li><a style="margin-left:0;" class="" href="docs/textinput.html#content">TextInput</a></li><li><a style="margin-left:0;" class="active" href="docs/toolbarandroid.html#content">ToolbarAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/touchablehighlight.html#content">TouchableHighlight</a></li><li><a style="margin-left:0;" class="" href="docs/touchablenativefeedback.html#content">TouchableNativeFeedback</a></li><li><a style="margin-left:0;" class="" href="docs/touchableopacity.html#content">TouchableOpacity</a></li><li><a style="margin-left:0;" class="" href="docs/touchablewithoutfeedback.html#content">TouchableWithoutFeedback</a></li><li><a style="margin-left:0;" class="" href="docs/view.html#content">View</a></li><li><a style="margin-left:0;" class="" href="docs/viewpagerandroid.html#content">ViewPagerAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/webview.html#content">WebView</a></li></ul></div><div class="nav-docs-section"><h3>apis</h3><ul><li><a style="margin-left:0;" class="" href="docs/actionsheetios.html#content">ActionSheetIOS</a></li><li><a style="margin-left:0;" class="" href="docs/alert.html#content">Alert</a></li><li><a style="margin-left:0;" class="" href="docs/alertios.html#content">AlertIOS</a></li><li><a style="margin-left:0;" class="" href="docs/animated.html#content">Animated</a></li><li><a style="margin-left:0;" class="" href="docs/appregistry.html#content">AppRegistry</a></li><li><a style="margin-left:0;" class="" href="docs/appstateios.html#content">AppStateIOS</a></li><li><a style="margin-left:0;" class="" href="docs/appstate.html#content">AppState</a></li><li><a style="margin-left:0;" class="" href="docs/asyncstorage.html#content">AsyncStorage</a></li><li><a style="margin-left:0;" class="" href="docs/backandroid.html#content">BackAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/cameraroll.html#content">CameraRoll</a></li><li><a style="margin-left:0;" class="" href="docs/clipboard.html#content">Clipboard</a></li><li><a style="margin-left:0;" class="" href="docs/datepickerandroid.html#content">DatePickerAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/dimensions.html#content">Dimensions</a></li><li><a style="margin-left:0;" class="" href="docs/intentandroid.html#content">IntentAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/interactionmanager.html#content">InteractionManager</a></li><li><a style="margin-left:0;" class="" href="docs/layoutanimation.html#content">LayoutAnimation</a></li><li><a style="margin-left:0;" class="" href="docs/linking.html#content">Linking</a></li><li><a style="margin-left:0;" class="" href="docs/linkingios.html#content">LinkingIOS</a></li><li><a style="margin-left:0;" class="" href="docs/nativemethodsmixin.html#content">NativeMethodsMixin</a></li><li><a style="margin-left:0;" class="" href="docs/netinfo.html#content">NetInfo</a></li><li><a style="margin-left:0;" class="" href="docs/panresponder.html#content">PanResponder</a></li><li><a style="margin-left:0;" class="" href="docs/pixelratio.html#content">PixelRatio</a></li><li><a style="margin-left:0;" class="" href="docs/pushnotificationios.html#content">PushNotificationIOS</a></li><li><a style="margin-left:0;" class="" href="docs/statusbarios.html#content">StatusBarIOS</a></li><li><a style="margin-left:0;" class="" href="docs/stylesheet.html#content">StyleSheet</a></li><li><a style="margin-left:0;" class="" href="docs/timepickerandroid.html#content">TimePickerAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/toastandroid.html#content">ToastAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/vibrationios.html#content">VibrationIOS</a></li><li><a style="margin-left:0;" class="" href="docs/vibration.html#content">Vibration</a></li></ul></div><div class="nav-docs-section"><h3>Polyfills</h3><ul><li><a style="margin-left:0;" class="" href="docs/flexbox.html#content">Flexbox</a></li><li><a style="margin-left:0;" class="" href="docs/shadowproptypesios.html#content">ShadowPropTypesIOS</a></li><li><a style="margin-left:0;" class="" href="docs/geolocation.html#content">Geolocation</a></li><li><a style="margin-left:0;" class="" href="docs/network.html#content">Network</a></li><li><a style="margin-left:0;" class="" href="docs/timers.html#content">Timers</a></li><li><a style="margin-left:0;" class="" href="docs/colors.html#content">Colors</a></li></ul></div></div><div class="inner-content"><a id="content"></a><table width="100%"><tbody><tr><td><h1><a class="anchor" name="toolbarandroid"></a>ToolbarAndroid <a class="hash-link" href="docs/toolbarandroid.html#toolbarandroid">#</a></h1></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Libraries/Components/ToolbarAndroid/ToolbarAndroid.android.js">Edit on GitHub</a></td></tr></tbody></table><div><div><p>React component that wraps the Android-only <a href="https://developer.android.com/reference/android/support/v7/widget/Toolbar.html" target="_blank"><code>Toolbar</code> widget</a>. A Toolbar can display a logo,
navigation icon (e.g. hamburger menu), a title &amp; subtitle and a list of actions. The title and
subtitle are expanded so the logo and navigation icons are displayed on the left, title and
subtitle in the middle and the actions on the right.</p><p>If the toolbar has an only child, it will be displayed between the title and actions.</p><p>Although the Toolbar supports remote images for the logo, navigation and action icons, this
should only be used in DEV mode where <code>require(&#x27;./some_icon.png&#x27;)</code> translates into a packager
URL. In release mode you should always use a drawable resource for these icons. Using
<code>require(&#x27;./some_icon.png&#x27;)</code> will do this automatically for you, so as long as you don&#x27;t
explicitly use e.g. <code>{uri: &#x27;http://...&#x27;}</code>, you will be good.</p><p>Example:</p><div class="prism language-javascript">render<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
&lt;ToolbarAndroid
logo<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;./app_logo.png&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
title<span class="token operator">=</span><span class="token string">&quot;AwesomeApp&quot;</span>
actions<span class="token operator">=</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;Settings&#x27;</span><span class="token punctuation">,</span> icon<span class="token punctuation">:</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;./icon_settings.png&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">,</span> show<span class="token punctuation">:</span> <span class="token string">&#x27;always&#x27;</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span>
onActionSelected<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onActionSelected<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>
onActionSelected<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>position<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>position <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token comment" spellcheck="true"> // index of &#x27;Settings&#x27;
</span> <span class="token function">showSettings<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></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/toolbarandroid.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="view"></a><a href="docs/view.html#props">View props...</a> <a class="hash-link" href="docs/toolbarandroid.html#view">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="actions"></a>actions <span class="propType"><span>[{title: string, icon: optionalImageSource, show: enum(&#x27;always&#x27;, &#x27;ifRoom&#x27;, &#x27;never&#x27;), showWithText: bool}]</span></span> <a class="hash-link" href="docs/toolbarandroid.html#actions">#</a></h4><div><p>Sets possible actions on the toolbar as part of the action menu. These are displayed as icons
or text on the right side of the widget. If they don&#x27;t fit they are placed in an &#x27;overflow&#x27;
menu.</p><p>This property takes an array of objects, where each object has the following keys:</p><ul><li><code>title</code>: <strong>required</strong>, the title of this action</li><li><code>icon</code>: the icon for this action, e.g. <code>require(&#x27;./some_icon.png&#x27;)</code></li><li><code>show</code>: when to show this action as an icon or hide it in the overflow menu: <code>always</code>,
<code>ifRoom</code> or <code>never</code></li><li><code>showWithText</code>: boolean, whether to show text alongside the icon or not</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="contentinsetend"></a>contentInsetEnd <span class="propType">number</span> <a class="hash-link" href="docs/toolbarandroid.html#contentinsetend">#</a></h4><div><p>Sets the content inset for the toolbar ending edge.</p><p>The content inset affects the valid area for Toolbar content other than
the navigation button and menu. Insets define the minimum margin for
these components and can be used to effectively align Toolbar content
along well-known gridlines.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="contentinsetstart"></a>contentInsetStart <span class="propType">number</span> <a class="hash-link" href="docs/toolbarandroid.html#contentinsetstart">#</a></h4><div><p>Sets the content inset for the toolbar starting edge.</p><p>The content inset affects the valid area for Toolbar content other than
the navigation button and menu. Insets define the minimum margin for
these components and can be used to effectively align Toolbar content
along well-known gridlines.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="logo"></a>logo <span class="propType">optionalImageSource</span> <a class="hash-link" href="docs/toolbarandroid.html#logo">#</a></h4><div><p>Sets the toolbar logo.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="navicon"></a>navIcon <span class="propType">optionalImageSource</span> <a class="hash-link" href="docs/toolbarandroid.html#navicon">#</a></h4><div><p>Sets the navigation icon.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onactionselected"></a>onActionSelected <span class="propType">function</span> <a class="hash-link" href="docs/toolbarandroid.html#onactionselected">#</a></h4><div><p>Callback that is called when an action is selected. The only argument that is passed to the
callback is the position of the action in the actions array.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="oniconclicked"></a>onIconClicked <span class="propType">function</span> <a class="hash-link" href="docs/toolbarandroid.html#oniconclicked">#</a></h4><div><p>Callback called when the icon is selected.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="overflowicon"></a>overflowIcon <span class="propType">optionalImageSource</span> <a class="hash-link" href="docs/toolbarandroid.html#overflowicon">#</a></h4><div><p>Sets the overflow icon.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="rtl"></a>rtl <span class="propType">bool</span> <a class="hash-link" href="docs/toolbarandroid.html#rtl">#</a></h4><div><p>Used to set the toolbar direction to RTL.
In addition to this property you need to add</p><p> android:supportsRtl=&quot;true&quot;</p><p>to your application AndroidManifest.xml and then call
<code>setLayoutDirection(LayoutDirection.RTL)</code> in your MainActivity
<code>onCreate</code> method.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="subtitle"></a>subtitle <span class="propType">string</span> <a class="hash-link" href="docs/toolbarandroid.html#subtitle">#</a></h4><div><p>Sets the toolbar subtitle.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="subtitlecolor"></a>subtitleColor <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/toolbarandroid.html#subtitlecolor">#</a></h4><div><p>Sets the toolbar subtitle color.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="testid"></a>testID <span class="propType">string</span> <a class="hash-link" href="docs/toolbarandroid.html#testid">#</a></h4><div><p>Used to locate this view in end-to-end tests.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="title"></a>title <span class="propType">string</span> <a class="hash-link" href="docs/toolbarandroid.html#title">#</a></h4><div><p>Sets the toolbar title.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="titlecolor"></a>titleColor <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/toolbarandroid.html#titlecolor">#</a></h4><div><p>Sets the toolbar title color.</p></div></div></div></div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/toolbarandroid.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/ToolbarAndroidExample.android.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">&#x27;use strict&#x27;</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> React <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;react&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> ReactNative <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;react-native&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> <span class="token punctuation">{</span>
StyleSheet<span class="token punctuation">,</span>
Text<span class="token punctuation">,</span>
View<span class="token punctuation">,</span>
<span class="token punctuation">}</span> <span class="token operator">=</span> ReactNative<span class="token punctuation">;</span>
<span class="token keyword">var</span> UIExplorerBlock <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;./UIExplorerBlock&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> UIExplorerPage <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;./UIExplorerPage&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> SwitchAndroid <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;SwitchAndroid&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> ToolbarAndroid <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;ToolbarAndroid&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> ToolbarAndroidExample <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">createClass<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
statics<span class="token punctuation">:</span> <span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">&#x27;&lt;ToolbarAndroid&gt;&#x27;</span><span class="token punctuation">,</span>
description<span class="token punctuation">:</span> <span class="token string">&#x27;Examples of using the Android toolbar.&#x27;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
getInitialState<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span>
actionText<span class="token punctuation">:</span> <span class="token string">&#x27;Example app with toolbar component&#x27;</span><span class="token punctuation">,</span>
toolbarSwitch<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
colorProps<span class="token punctuation">:</span> <span class="token punctuation">{</span>
titleColor<span class="token punctuation">:</span> <span class="token string">&#x27;#3b5998&#x27;</span><span class="token punctuation">,</span>
subtitleColor<span class="token punctuation">:</span> <span class="token string">&#x27;#6a7180&#x27;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
render<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
&lt;UIExplorerPage title<span class="token operator">=</span><span class="token string">&quot;&lt;ToolbarAndroid&gt;&quot;</span><span class="token operator">&gt;</span>
&lt;UIExplorerBlock title<span class="token operator">=</span><span class="token string">&quot;Toolbar with title/subtitle and actions&quot;</span><span class="token operator">&gt;</span>
&lt;ToolbarAndroid
actions<span class="token operator">=</span><span class="token punctuation">{</span>toolbarActions<span class="token punctuation">}</span>
navIcon<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;image!ic_menu_black_24dp&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
onActionSelected<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onActionSelected<span class="token punctuation">}</span>
onIconClicked<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 keyword">this</span><span class="token punctuation">.</span><span class="token function">setState<span class="token punctuation">(</span></span><span class="token punctuation">{</span>actionText<span class="token punctuation">:</span> <span class="token string">&#x27;Icon clicked&#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>styles<span class="token punctuation">.</span>toolbar<span class="token punctuation">}</span>
subtitle<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>actionText<span class="token punctuation">}</span>
title<span class="token operator">=</span><span class="token string">&quot;Toolbar&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
&lt;Text<span class="token operator">&gt;</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>actionText<span class="token punctuation">}</span>&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>UIExplorerBlock<span class="token operator">&gt;</span>
&lt;UIExplorerBlock title<span class="token operator">=</span><span class="token string">&quot;Toolbar with logo &amp; custom title view (a View with Switch+Text)&quot;</span><span class="token operator">&gt;</span>
&lt;ToolbarAndroid
logo<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;image!launcher_icon&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>toolbar<span class="token punctuation">}</span><span class="token operator">&gt;</span>
&lt;View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>height<span class="token punctuation">:</span> <span class="token number">56</span><span class="token punctuation">,</span> flexDirection<span class="token punctuation">:</span> <span class="token string">&#x27;row&#x27;</span><span class="token punctuation">,</span> alignItems<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>
&lt;SwitchAndroid
value<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>toolbarSwitch<span class="token punctuation">}</span>
onValueChange<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState<span class="token punctuation">(</span></span><span class="token punctuation">{</span><span class="token string">&#x27;toolbarSwitch&#x27;</span><span class="token punctuation">:</span> value<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>
&lt;Text<span class="token operator">&gt;</span><span class="token punctuation">{</span><span class="token string">&#x27;\&#x27;Tis but a switch&#x27;</span><span class="token punctuation">}</span>&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>ToolbarAndroid<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>UIExplorerBlock<span class="token operator">&gt;</span>
&lt;UIExplorerBlock title<span class="token operator">=</span><span class="token string">&quot;Toolbar with no icon&quot;</span><span class="token operator">&gt;</span>
&lt;ToolbarAndroid
actions<span class="token operator">=</span><span class="token punctuation">{</span>toolbarActions<span class="token punctuation">}</span>
style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>toolbar<span class="token punctuation">}</span>
subtitle<span class="token operator">=</span><span class="token string">&quot;There be no icon here&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>UIExplorerBlock<span class="token operator">&gt;</span>
&lt;UIExplorerBlock title<span class="token operator">=</span><span class="token string">&quot;Toolbar with navIcon &amp; logo, no title&quot;</span><span class="token operator">&gt;</span>
&lt;ToolbarAndroid
actions<span class="token operator">=</span><span class="token punctuation">{</span>toolbarActions<span class="token punctuation">}</span>
logo<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;image!launcher_icon&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
navIcon<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;image!ic_menu_black_24dp&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>toolbar<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>UIExplorerBlock<span class="token operator">&gt;</span>
&lt;UIExplorerBlock title<span class="token operator">=</span><span class="token string">&quot;Toolbar with custom title colors&quot;</span><span class="token operator">&gt;</span>
&lt;ToolbarAndroid
navIcon<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;image!ic_menu_black_24dp&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
onIconClicked<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 keyword">this</span><span class="token punctuation">.</span><span class="token function">setState<span class="token punctuation">(</span></span><span class="token punctuation">{</span>colorProps<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>
title<span class="token operator">=</span><span class="token string">&quot;Wow, such toolbar&quot;</span>
style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>toolbar<span class="token punctuation">}</span>
subtitle<span class="token operator">=</span><span class="token string">&quot;Much native&quot;</span>
<span class="token punctuation">{</span><span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>colorProps<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
&lt;Text<span class="token operator">&gt;</span>
Touch the icon to reset the custom colors to the default <span class="token punctuation">(</span>theme<span class="token operator">-</span>provided<span class="token punctuation">)</span> ones<span class="token punctuation">.</span>
&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>UIExplorerBlock<span class="token operator">&gt;</span>
&lt;UIExplorerBlock title<span class="token operator">=</span><span class="token string">&quot;Toolbar with remote logo &amp; navIcon&quot;</span><span class="token operator">&gt;</span>
&lt;ToolbarAndroid
actions<span class="token operator">=</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;Bunny&#x27;</span><span class="token punctuation">,</span> icon<span class="token punctuation">:</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;./bunny.png&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">,</span> show<span class="token punctuation">:</span> <span class="token string">&#x27;always&#x27;</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span>
logo<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;./hawk.png&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
navIcon<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;./bunny.png&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
title<span class="token operator">=</span><span class="token string">&quot;Bunny and Hawk&quot;</span>
style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>toolbar<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>UIExplorerBlock<span class="token operator">&gt;</span>
&lt;UIExplorerBlock title<span class="token operator">=</span><span class="token string">&quot;Toolbar with custom overflowIcon&quot;</span><span class="token operator">&gt;</span>
&lt;ToolbarAndroid
actions<span class="token operator">=</span><span class="token punctuation">{</span>toolbarActions<span class="token punctuation">}</span>
overflowIcon<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;./bunny.png&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>toolbar<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>UIExplorerBlock<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>UIExplorerPage<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>
_onActionSelected<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>position<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
actionText<span class="token punctuation">:</span> <span class="token string">&#x27;Selected &#x27;</span> <span class="token operator">+</span> toolbarActions<span class="token punctuation">[</span>position<span class="token punctuation">]</span><span class="token punctuation">.</span>title<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> toolbarActions <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;Create&#x27;</span><span class="token punctuation">,</span> icon<span class="token punctuation">:</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;image!ic_create_black_48dp&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">,</span> show<span class="token punctuation">:</span> <span class="token string">&#x27;always&#x27;</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;Filter&#x27;</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;Settings&#x27;</span><span class="token punctuation">,</span> icon<span class="token punctuation">:</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;image!ic_settings_black_48dp&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">,</span> show<span class="token punctuation">:</span> <span class="token string">&#x27;always&#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 keyword">var</span> styles <span class="token operator">=</span> StyleSheet<span class="token punctuation">.</span><span class="token function">create<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
toolbar<span class="token punctuation">:</span> <span class="token punctuation">{</span>
backgroundColor<span class="token punctuation">:</span> <span class="token string">&#x27;#e9eaed&#x27;</span><span class="token punctuation">,</span>
height<span class="token punctuation">:</span> <span class="token number">56</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> ToolbarAndroidExample<span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/touchablehighlight.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="338" src="img/uiexplorer_main_android.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/q7wkvt42v6bkr0pzt1n0gmbwfr?device=nexus5&amp;scale=65&amp;autoplay=false&amp;orientation=portrait&amp;deviceColor=white&amp;params=%7B%22route%22%3A%22ToolbarAndroid%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></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)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-41298772-2', 'facebook.github.io');
ga('send', 'pageview');
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
docsearch({
apiKey: '2c98749b4a1e588efec53b2acec13025',
indexName: 'react-native-versions',
inputSelector: '#algolia-doc-search',
algoliaOptions: { facetFilters: [ "tags:0.25" ], hitsPerPage: 5 }
});
</script><script src="js/scripts.js"></script></body></html>
Reference in New Issue View Git Blame Copy Permalink