轉載請標明出處： [http://blog.csdn.net/developer_jiangqq/article/details/50612786](http://blog.csdn.net/developer_jiangqq/article/details/50612786) 本文出自:[【江清清的博客】](http://blog.csdn.net/developer_jiangqq) # (一)前言 ???????【好消息】個人網站已經上線運行,后面博客以及技術干貨等精彩文章會同步更新，請大家關注收藏:[http://www.lcode.org](http://www.lcode.org/)????? ? ? ? ?今天我們一起來看一下工具欄控件ToolBarAndroid的介紹完全解析以及最佳實踐。 ? ? ? ? ?剛創建的React Native技術交流1群(282693535),React Native交流2群:(496601483)，請不要重復加群！歡迎各位大牛,React?Native技術愛好者加入交流!同時博客左側歡迎微信掃描關注訂閱號,移動技術干貨,精彩文章技術推送! ?????????該ToolBarAndroid組件進行封裝了Android平臺中的ToolBar組件(只適用于Android平臺)。一個ToolBar組件可以顯示一個Logo圖標以及一些導航圖片(例如:菜單功能按鈕)，一個標題以及副標題還有一系列功能的列表。標題和副標題是上下位置。所以logo圖標和導航圖標顯示在左邊，標題和副標題顯示在中間，功能列表顯示在右邊。 ???????【注】如果Toolbar只有一個子節點，該會顯示在標題和功能列表中間。 特別聲明:盡管Toolbar的Logo圖標，導航圖標以及功能列表的圖標支持加載遠程的圖片(網絡圖片等)。不過該加載遠程圖片資源只是在Dev(開發模式)模式中支持。但是在Release(發布模式)模式中，你應該只能使用應用中的資源來進行渲染。例如使用request('./some_icon.png')會自動幫我進行加載資源。所以我們在開發中只要不直接使用{uri:'http://...'}就一般沒啥問題啦。 # (二)官方實例代碼 ??????????這邊我們大家看一下官方提供的一個ToolBar使用的很簡單的例子: ~~~ render: function() { return ( <ToolbarAndroid logo={require('./app_logo.png')} title="AwesomeApp" actions={[{title: 'Settings', icon:require('./icon_settings.png'), show: 'always'}]} onActionSelected={this.onActionSelected}/> ) }, onActionSelected:function(position) { if (position === 0) { // index of 'Settings' showSettings(); } } ~~~ ??????????該代碼添加了一個ToolBarAndroid組件，其中加入Logo圖標，標題信息，以及功能列表信息，當功能被點擊的時候進行響應相關方法。具體關于使用實例會在下面詳細進行講解。 # (三)屬性方法(只介紹通用以及Android平臺) ????????? 3.1.View相關屬性樣式全部繼承(例如:寬和高,背景顏色,邊距等相關屬性樣式) ????????? 3.2.actions?設置功能列表信息屬性?傳入的參數信息為:?[{title: string, icon: optionalImageSource, show: enum('always','ifRoom', 'never'), showWithText: bool}]???進行設置功能菜單中的可用的相關功能。該會在顯示在組件的右側(顯示方式為圖標或者文字)，如果界面上面區域已經放不下了，該會加入到隱藏的菜單中(彈出進行顯示)。該屬性的值是一組對象數組，每一個對象包括以下以下一些參數: * title:?必須的，該功能的標題 * icon:?功能的圖標??采用該代碼進行獲取?require('./some_icon.png') * show:?該設置圖標直接顯示，還是隱藏或者顯示在彈出菜單中。always代表總是顯示,ifRoom代表如果Bar中控件夠進行顯示，或者never代表使用直接不顯示 * showWithText? boolean?進行設置圖標旁邊是否要顯示標題信息????????????? ?????????3.3.contentInSetEnd??number?該用于設置ToolBar的右邊和屏幕的右邊緣的間距。 ????????? 3.4.contentInsetStart number?該用于設置ToolBar的左邊和屏幕的右邊緣的間距。 ????????? 3.5.logo??optionalImageSource??可選圖片資源??用于設置Toolbar的Logo圖標 ????????? 3.6.navIcon optionalImageSource?可選圖片資源?用于設置導航圖標 ????????? 3.7.onActionSelectedfunction方法?當我們的功能被選中的時候回調方法。該方法只會傳入唯一一個參數:點擊功能在功能列表中的索引信息 ???????? 3.8.onIconClickedfunction?當圖標被選中的時候回調方法 ???????? 3.9.overflowIcon? optionalImageSource?可選圖片資源?設置功能列表中彈出菜單中的圖標 ???????? 3.10.?rtl???設置toolbar中的功能順序是從右到左(RTL:Right To Left)。為了讓該效果生效，你必須在Android應用中的AndroidMainifest.xml中的application節點中添加android:supportsRtl="true"，然后在你的主Activity(例如:MainActivity)的onCreate方法中調用如下代碼:setLayoutDirection(LayoutDirection.RTL)。 ???????? 3.11.subtitle? string?設置toolbar的副標題 ???????? 3.12.subtitleColor??color??設置設置toolbar的副標題顏色 ???????? 3.13.title?string??設置toolbar標題 ???????? 3.14.titleColor color?設置toolbar的標題顏色 # (四)ToolbarAndroid實例講解 ???????? 4.1.實例只是簡單的顯示Toolbar的標題/副標題以及功能列表，導航圖標，實例代碼如下: ~~~ 'use strict'; import React, { AppRegistry, Component, StyleSheet, Text, View, } from'react-native'; var ToolbarAndroid =require('ToolbarAndroid'); class ToolBarAndroidDemo extends Component { render() { return ( <ToolbarAndroid actions={toolbarActions} navIcon={require('./ic_menu_black_24dp.png')} style={styles.toolbar} subtitle="副標題" title="主標題"></ToolbarAndroid> ); } } var toolbarActions =[ {title: 'Create', icon:require('./ic_create_black_48dp.png'), show: 'always'}, {title: 'Filter'}, {title: 'Settings', icon:require('./ic_settings_black_48dp.png'), show: 'always'}, ]; const styles =StyleSheet.create({ toolbar: { backgroundColor: '#e9eaed', height: 56, }, }); AppRegistry.registerComponent('ToolBarAndroidDemo',() => ToolBarAndroidDemo); ~~~ ?運行效果如下:  ???????? 4.2.只設置標題以及功能列表，無導航圖標效果,代碼如下: ~~~ 'use strict'; import React, { AppRegistry, Component, StyleSheet, View, } from'react-native'; var ToolbarAndroid =require('ToolbarAndroid'); class ToolBarAndroidDemo extends Component { render() { return ( <ToolbarAndroid actions={toolbarActions} style={styles.toolbar} title="只存在標題"></ToolbarAndroid> ); } } var toolbarActions =[ {title: 'Create', icon:require('./ic_create_black_48dp.png'), show: 'always'}, {title: 'Filter'}, {title: 'Settings', icon:require('./ic_settings_black_48dp.png'), show: 'always'}, ]; const styles =StyleSheet.create({ toolbar: { backgroundColor: '#e9eaed', height: 56, }, }); AppRegistry.registerComponent('ToolBarAndroidDemo',() => ToolBarAndroidDemo); ~~~ 運行效果如下:  ?????? 4.3.只存在導航圖標，Logo圖標以及功能列表實例代碼如下: ~~~ 'use strict'; import React, { AppRegistry, Component, StyleSheet, View, } from'react-native'; var ToolbarAndroid =require('ToolbarAndroid'); class ToolBarAndroidDemo extends Component { render() { return ( <ToolbarAndroid navIcon={require('./ic_menu_black_24dp.png')} logo={require('./launcher_icon.png')} actions={toolbarActions} style={styles.toolbar} > </ToolbarAndroid> ); } } var toolbarActions =[ {title: 'Create', icon:require('./ic_create_black_48dp.png'), show: 'always'}, {title: 'Filter'}, {title: 'Settings', icon:require('./ic_settings_black_48dp.png'), show: 'always'}, ]; const styles =StyleSheet.create({ toolbar: { backgroundColor: '#e9eaed', height: 56, }, }); AppRegistry.registerComponent('ToolBarAndroidDemo',() => ToolBarAndroidDemo); ~~~ 運行效果如下:  ??? 4.4.最后講一個知識點就是ToolbarAndroid組件還支持組件的嵌套，我們來看一個實例ToolbarAndroid嵌套SwitchAndroid組件的例子,功能代碼如下: ~~~ 'use strict'; import React, { AppRegistry, Component, StyleSheet, View, } from'react-native'; var ToolbarAndroid =require('ToolbarAndroid'); var SwitchAndroid =require('SwitchAndroid'); class ToolBarAndroidDemo extends Component { render() { return ( <ToolbarAndroid navIcon={require('./ic_menu_black_24dp.png')} logo={require('./launcher_icon.png')} style={styles.toolbar}> <SwitchAndroid value={true} /> </ToolbarAndroid> ); } } var toolbarActions =[ {title: 'Create', icon:require('./ic_create_black_48dp.png'), show: 'always'}, {title: 'Filter'}, {title: 'Settings', icon:require('./ic_settings_black_48dp.png'), show: 'always'}, ]; const styles =StyleSheet.create({ toolbar: { backgroundColor: '#e9eaed', height: 56, }, }); AppRegistry.registerComponent('ToolBarAndroidDemo',() => ToolBarAndroidDemo); ~~~ 運行效果如下:  # (五)最后總結 ??????????今天我們主要學習一下工具欄ToolbarAndroid組件的詳解以及使用方法。大家有問題可以加一下群React Native技術交流群(282693535)或者底下進行回復一下。 ? ? ? ?尊重原創，轉載請注明：From Sky丶清（[http://blog.csdn.net/developer_jiangqq](http://blog.csdn.net/developer_jiangqq)） 侵權必究！ ? ? ? ?關注我的訂閱號(codedev123),每天分享移動開發技術(Android/IOS),項目管理以及博客文章!(歡迎關注，第一時間推送精彩文章)  ? ? ?關注我的微博，可以獲得更多精彩內容 ? ? ??[](http://weibo.com/u/1855428195?s=6uyXnP)