React 組件，包裝了 Android Toolbar 小工具。工具欄可以顯示一個(gè)標(biāo)志，導(dǎo)航圖標(biāo)（如漢堡包菜單），標(biāo)題和副標(biāo)題和操作列表。標(biāo)題和子標(biāo)題被擴(kuò)展這樣以來標(biāo)志和導(dǎo)航圖標(biāo)顯示在左邊，標(biāo)題和副標(biāo)題在中間并且操作在右邊。

如果工具欄具有唯一子級(jí)，它將顯示在標(biāo)題和操作之間。

例子：

    render: function() {   
      return (
        <ToolbarAndroid
          logo={require('image!app_logo')}
          title="AwesomeApp"
          actions={[{title: 'Settings', icon: require('image!icon_settings')
    show: 'always'}]}
          onActionSelected={this.onActionSelected} />
     )
    },
    onActionSelected: function(position) {
      if (position === 0) { // index of 'Settings'
     }
    }

屬性

actions [{title: string, icon: Image.propTypes.source, show: enum('always', 'ifRoom', 'never'), showWithText: bool}]

將工具欄上的可能動(dòng)作設(shè)置為動(dòng)作菜單的一部分。這些都顯示為圖標(biāo)或小部件右側(cè)的文本。如果不適合，它們將被放置在一個(gè)'溢出'菜單。

此屬性需要一個(gè)對(duì)象數(shù)組，其中每個(gè)對(duì)象具有以下鍵：

• title:必要的, 這個(gè)操作的標(biāo)題

• icon: 這個(gè)操作的圖標(biāo)，例如： require('image!some_icon')

• show:當(dāng)把這個(gè)操作顯示為一個(gè)圖標(biāo)或隱藏在溢出菜單中時(shí)： always, ifRoom 或 never

• showWithText: 布爾值，是否顯示圖標(biāo)旁邊的文本

logo Image.propTypes.source

設(shè)置工具欄的標(biāo)志。

navIcon Image.propTypes.source

設(shè)置導(dǎo)航圖標(biāo)。

onActionSelected function

被選中時(shí)調(diào)用回調(diào)函數(shù)。傳遞到回調(diào)的唯一參數(shù)是操作數(shù)組中的位置。

onIconClicked function

在選定圖標(biāo)時(shí)調(diào)用。

subtitle string

設(shè)置工具欄副標(biāo)題。

subtitleColor string

設(shè)置工具欄副標(biāo)題的顏色。

testID string

用于在端到端測(cè)試中查找此視圖。

title string

設(shè)置工具欄標(biāo)題。

titleColor string

設(shè)置工具欄副標(biāo)題的顏色。

例子

    'use strict';

    var React = require('react-native');
    var {
      StyleSheet,
      Text,
      View,
    } = React;
    var UIExplorerBlock = require('./UIExplorerBlock');
    var UIExplorerPage = require('./UIExplorerPage');

    var SwitchAndroid = require('SwitchAndroid');
    var ToolbarAndroid = require('ToolbarAndroid');

    var ToolbarAndroidExample = React.createClass({
      statics: {
      title: '<ToolbarAndroid>',
      description: 'Examples of using the Android toolbar.'
    },
    getInitialState: function() {
    return {
      actionText: 'Example app with toolbar component',
      toolbarSwitch: false,
      colorProps: {
        titleColor: '#3b5998',
        subtitleColor: '#6a7180',
       },
     };
    },
    render: function() {
    return (
      <UIExplorerPage title="<ToolbarAndroid>">
        <UIExplorerBlock title="Toolbar with title/subtitle and actions">
          <ToolbarAndroid
            actions={toolbarActions}
            navIcon={require('image!ic_menu_black_24dp')}
            onActionSelected={this._onActionSelected}
            onIconClicked={() => this.setState({actionText: 'Icon clicked'})}
            style={styles.toolbar}
            subtitle={this.state.actionText}
            title="Toolbar" />
          <Text>{this.state.actionText}</Text>
        </UIExplorerBlock>
        <UIExplorerBlock title="Toolbar with logo & custom title view (a View with Switch+Text)">
          <ToolbarAndroid
            logo={require('image!launcher_icon')}
            style={styles.toolbar}>
            <View style={{height: 56, flexDirection: 'row', alignItems: 'center'}}>
              <SwitchAndroid
                value={this.state.toolbarSwitch}
                onValueChange={(value) => this.setState({'toolbarSwitch': value})} />
              <Text>{'\'Tis but a switch'}</Text>
            </View>
          </ToolbarAndroid>
        </UIExplorerBlock>
        <UIExplorerBlock title="Toolbar with no icon">
          <ToolbarAndroid
            actions={toolbarActions}
            style={styles.toolbar}
            subtitle="There be no icon here" />
        </UIExplorerBlock>
        <UIExplorerBlock title="Toolbar with navIcon & logo, no title">
          <ToolbarAndroid
            actions={toolbarActions}
            logo={require('image!launcher_icon')}
            navIcon={require('image!ic_menu_black_24dp')}
            style={styles.toolbar} />
        </UIExplorerBlock>
        <UIExplorerBlock title="Toolbar with custom title colors">
          <ToolbarAndroid
            navIcon={require('image!ic_menu_black_24dp')}
            onIconClicked={() => this.setState({colorProps: {}})}
            title="Wow, such toolbar"
            style={styles.toolbar}
            subtitle="Much native"
            {...this.state.colorProps} />
          <Text>
            Touch the icon to reset the custom colors to the default (theme-provided) ones.
          </Text>
        </UIExplorerBlock>
      </UIExplorerPage>
    );
    },
    _onActionSelected: function(position) {
    this.setState({
      actionText: 'Selected ' + toolbarActions[position].title,
    });
    },
    });

    var toolbarActions = [
    {title: 'Create', icon: require('image!ic_create_black_48dp'), show: 'always'},
    {title: 'Filter'},
    {title: 'Settings', icon: require('image!ic_settings_black_48dp'), show: 'always'},
    ];

    var styles = StyleSheet.create({
    toolbar: {
    backgroundColor: '#e9eaed',
    height: 56,
    },
    });

    module.exports = ToolbarAndroidExample;