React Native Android 独有组件之 Toolb

ToolbarAndroid 是一个包装了仅限 Android 平台的工具栏(Toolbar)部件的 React 组件。一个 Toolbar 可以显示一个徽标，一个导航图标（譬如汉堡形状的菜单按钮），一个标题与副标题，以及一个功能列表。标题和副标题会在中间显示，徽标和导航图标会在左侧显示，而功能列表则在右侧显示。

如果工具栏只有一个子节点，它会在标题和功能列表之间显示。

尽管 Toolbar 支持在徽标、导航和功能图标上使用远程图片，这也只应该在开发(DEV)模式下使用。在发行（release）模式下，你永远都应该用图片资源来渲染这些图标。使用require('./some_icon.png')会自动帮你包装好，所以只要你不直接用{uri:'http://...'}，就没什么问题。

属性

名称	类型	必填	说明
overflowIcon	optionalImageSource	否	设置功能列表的弹出菜单的图标。
actions	array of object: {title: string,icon: optionalImageSource,show: enum('always', 'ifRoom', 'never'),showWithText: bool}	否	设置功能菜单中的可用功能。
contentInsetStart	number	否	设置工具栏的左边缘和屏幕左边缘的距离。
logo	optionalImageSource	否	设置整个工具条的logo。
navIcon	optionalImageSource	否	设置导航器的图标。
onActionSelected	function	否	当一个功能被选中的时候调用此回调。
onIconClicked	function	否	当图标被选中的时候调用此回调。
contentInsetEnd	number	否	设置工具栏的右边缘和屏幕右边缘的距离。
rtl	bool	否	设置工具栏的排列顺序为从右到左。
subtitle	string	否	设置工具栏的子标题。
subtitleColor	color	否	设置工具栏子标题的颜色。
title	string	否	设置工具栏的标题。
titleColor	color	否	设置工具栏的标题颜色。

实例

1. 逻辑代码

import React, { Component } from 'react';
import {
  StyleSheet,
  ToolbarAndroid,
  View,
  Text
} from 'react-native';

var toolbarActions = [{
    title: 'shop',
    icon: require('./img/cat.png'),
    show: 'always'
  },
  {
    title: 'loonggg'
  },
  {
    title: 'game',
    icon: require('./img/cat.png'),
    show: 'always'
  },
];

export default class App extends Component {
  
  render() {
    
    return (
    
        <View style={styles.container}>
            
      <ToolbarAndroid
        actions = {
          toolbarActions
        }
        style = {
          styles.toolbar
        }
          title="直播吧"
          logo={require('./img/cat.png')}
        titleColor='white'/>
          
        </View>
    )
  }

  
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor:'white'
  },
  toolbar: {
    backgroundColor: '#27b5ee',
    height:56
  }

});

2. 效果图

toolbar.jpg