(一)前言

今天我們一起來看一下工具欄控件ToolBarAndroid的介紹完全解析以及最佳實踐。

剛創建的React Native技術交流群(282693535),歡迎各位大牛,React Native技術愛好者加入交流!同時博客左側歡迎微信掃描關注訂閱號,移動技術干貨,精彩文章技術推送!

該ToolBarAndroid組件進行封裝了Android平台中的ToolBar組件(只適用於Android平台)。一個ToolBar組件可以顯示一個Logo圖標以及一些導航圖片(例如:菜單功能按鈕)，一個標題以及副標題還有一系列功能的列表。標題和副標題是上下位置。所以logo圖標和導航圖標顯示在左邊，標題和副標題顯示在中間，功能列表顯示在右邊。

【注】如果Toolbar只有一個子節點，該會顯示在標題和功能列表中間。

特別聲明:盡管Toolbar的Logo圖標，導航圖標以及功能列表的圖標支持加載遠程的圖片(網絡圖片等)。不過該加載遠程圖片資源只是在Dev(開發模式)模式中支持。但是在Release(發布模式)模式中，你應該只能使用應用中的資源來進行渲染。例如使用request('./some_icon.png')會自動幫我進行加載資源。所以我們在開發中只要不直接使用{uri:'http://...'}就一般沒啥問題啦。

(二)官方實例代碼

這邊我們大家看一下官方提供的一個ToolBar使用的很簡單的例子:

render: function() {
  return (
    
  )
},
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 (
         
      );
    }
  }
  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 (
         
      );
    }
  }
  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 (
         
          
      );
    }
  }
  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 (
         
              
          
      );
    }
  }
  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);

   

  運行效果如下: