创新互联React教程：ToolbarAndroid

React 组件，包装了 Android Toolbar 小工具。工具栏可以显示一个标志，导航图标（如汉堡包菜单），标题和副标题和操作列表。标题和子标题被扩展这样以来标志和导航图标显示在左边，标题和副标题在中间并且操作在右边。

如果工具栏具有唯一子级，它将显示在标题和操作之间。

例子：

    render: function() {   
      return (
        
     )
    },
    onActionSelected: function(position) {      if (position === 0) { // index of 'Settings'
     }
    }

属性

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

将工具栏上的可能动作设置为动作菜单的一部分。这些都显示为图标或小部件右侧的文本。如果不适合，它们将被放置在一个'溢出'菜单。

此属性需要一个对象数组，其中每个对象具有以下键：

• title:必要的, 这个操作的标题

• icon: 这个操作的图标，例如： require('image!some_icon')

• show:当把这个操作显示为一个图标或隐藏在溢出菜单中时： always, ifRoom 或 never

• showWithText: 布尔值，是否显示图标旁边的文本

logo Image.propTypes.source

设置工具栏的标志。

navIcon Image.propTypes.source

设置导航图标。

onActionSelected function

被选中时调用回调函数。传递到回调的唯一参数是操作数组中的位置。

onIconClicked function

在选定图标时调用。

subtitle string

设置工具栏副标题。

subtitleColor string

设置工具栏副标题的颜色。

testID string

用于在端到端测试中查找此视图。

title string

设置工具栏标题。

titleColor string

设置工具栏副标题的颜色。

例子

    '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: '',
      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 (
      ">
        
           this.setState({actionText: 'Icon clicked'})}
            style={styles.toolbar}
            subtitle={this.state.actionText}
            title="Toolbar" />
          {this.state.actionText}
        
        
          
            
               this.setState({'toolbarSwitch': value})} />
              {'\'Tis but a switch'}
            
          
        
        
          
        
        
          
        
        
           this.setState({colorProps: {}})}
            title="Wow, such toolbar"
            style={styles.toolbar}
            subtitle="Much native"
            {...this.state.colorProps} />
                      Touch the icon to reset the custom colors to the default (theme-provided) ones.
          
        
      
    );
    },    _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;

网站栏目：创新互联React教程：ToolbarAndroid
文章地址：http://www.mswzjz.cn/qtweb/news3/377603.html

攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能，是专注品牌与效果的网络营销公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 贝锐智能