mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
44 lines
10 KiB
Markdown
44 lines
10 KiB
Markdown
---
|
|
id: version-0.45-toolbarandroid
|
|
title: toolbarandroid
|
|
original_id: toolbarandroid
|
|
---
|
|
<a id="content"></a><h1><a class="anchor" name="toolbarandroid"></a>ToolbarAndroid <a class="hash-link" href="docs/toolbarandroid.html#toolbarandroid">#</a></h1><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 & 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('./some_icon.png')</code> translates into a packager
|
|
URL. In release mode you should always use a drawable resource for these icons. Using
|
|
<code>require('./some_icon.png')</code> will do this automatically for you, so as long as you don't
|
|
explicitly use e.g. <code>{uri: 'http://...'}</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>
|
|
<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">'./app_logo.png'</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
|
|
title<span class="token operator">=</span><span class="token string">"AwesomeApp"</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">'Settings'</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">'./icon_settings.png'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> show<span class="token punctuation">:</span> <span class="token string">'always'</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">></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 'Settings'
|
|
</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="viewproptypes"></a><a href="docs/viewproptypes.html#props">ViewPropTypes props...</a> <a class="hash-link" href="docs/toolbarandroid.html#viewproptypes">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="actions"></a>actions?: <span class="propType">PropTypes.arrayOf(PropTypes.shape({
|
|
title: PropTypes.string.isRequired,
|
|
icon: optionalImageSource,
|
|
show: PropTypes.oneOf(['always', 'ifRoom', 'never']),
|
|
showWithText: PropTypes.bool
|
|
}))</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't fit they are placed in an 'overflow'
|
|
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('./some_icon.png')</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">PropTypes.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">PropTypes.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">PropTypes.func</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">PropTypes.func</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">PropTypes.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="true"</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">PropTypes.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">PropTypes.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">PropTypes.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><p class="edit-page-block">You can <a target="_blank" href="https://github.com/facebook/react-native/blob/master/Libraries/Components/ToolbarAndroid/ToolbarAndroid.android.js">edit the content above on GitHub</a> and send us a pull request!</p><div class="docs-prevnext"><a class="docs-prev" href="docs/textinput.html#content">← Prev</a><a class="docs-next" href="docs/touchablehighlight.html#content">Next →</a></div> |