Android教程網
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> Android開發 >> 關於android開發 >> 【React Native開發】React Native控件之ToolbarAndroid工具欄控件講解以及使用(15)

【React Native開發】React Native控件之ToolbarAndroid工具欄控件講解以及使用(15)

編輯:關於android開發

【React Native開發】React Native控件之ToolbarAndroid工具欄控件講解以及使用(15)


(一)前言

今天我們一起來看一下工具欄控件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);

     

    運行效果如下:

    \

  1. 上一頁:
  2. 下一頁:
熱門文章
閱讀排行版
Copyright © Android教程網 All Rights Reserved