React Native控件之ToolbarAndroid工具栏控件讲解以及使用

React Native控件之ToolbarAndroid工具栏控件讲解以及使用

（一）前言

今天我们来看一下工具栏控件ToolBarAndroid的介绍以使用方法。首先我来介绍一下这个组件，组件功能与iOS平台UINavigationBar类似、与Android平台ToolBar组件类似。

（二）ToolbarAndroid简介与官方例子

一个ToolBarAndroid组件可以显示Logo图标、some导航图片（如：菜单功能按钮）、一个标题、一个副标题、一系列功能列表。logo图标和导航图标现在左边，标题和副标题显示在中间（标题和副标题是上下位置显示），功能列表显示在右边。

【注意1】如果ToolBar只有一个子节点，该节点显示在标题和功能列表中间。

【注意2】尽管ToolBar的Logo图标、导航图标以及功能图标支持加载远程图片（网络记载等）。不过不推荐使用，因为加载远程图片资源只是在Dev(开发模式)中支持。但是在Release（发布模式）中，只能使用应用中图片资源来进行渲染。例如使用require(‘./some_icon.png’)来自动帮我们加载资源图片。所以只要我们在开发中不要使用{uri:’http://…..’}就一般没有问题。

我们来看看官方例子：

render:function(){
return(
<ToolbarAndroid
logo={require(./app_logo.png)}
title='PerfectProject'
actions={[{title: 'Settings', icon:require('./icon_settings.png'), show:'always'}]}
onActionSelected={this.onActionSelected}
/> );
},

onActionSelected:function(position) {
if(position===0){ // index of 'Settings'
showSettings();
}
}

上面实例代码讲述了ToolbarAndroid的logo属性、title属性、actions属性、onActionSelected属性，接下来详细讲解一下该组件的属性。

（三）属性介绍

3.1 View 相关属性样式全部都继承

3.2 actions 功能列表，值为数组，传入参数格式：[{title: string, icon: optionalImageSource, show: enum(‘always’, ‘ifRoom’, ‘never’), showWithText: bool}]

进行设置功能菜单中可用的相关功能。这个会显示在ToolbarAndroid组件的右侧（显示方式为图标或者文字），如果界面区域已经放不下了，这个会加入到隐藏的菜单中（弹出才能显示）。传入值是一个对象数组，每个对象包括以下值：

title： 必须的参数，该功能的标题

icon：功能的图标，使用require(‘…..’)方法获取

show：设置图标直接显示、隐藏、显示在弹出菜单中。always代表总是显示，never代表隐藏，ifRoom代表如果bar空间足够就显示。

showWithText：boolean 设置图标旁边是否要显示标题信息

3.3 contentInSetEnd number 用于设置ToolBar的右边和屏幕的右边缘的间距。

3.4 contentInsetStart number 用于设置ToolBar的左边和屏幕的左边缘的间距。

3.5 logo optionalImageSource 可选图片资源 用于设置Toolbar的Logo图标

3.6 navIcon optionalImageSource 可选图片资源 用于设置导航图标

3.7 onActionSelected function方法 当我们的功能被选中的时候回调方法。该方法只会传入唯一一个参数:点击功能在功能列表中的索引信息

3.8 onIconClicked function 当图标被选中的时候回调方法

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的标题颜色

3.15 testID string 用于定位这个组件在端到端测试中

（四）ToolbarAndroid实例讲解

4.1 只显示标题、副标题、功能列表以及导航图标

'use strict';
import React, {
AppRegistry,
Component,
StyleSheet,
Text,
View,
} from 'react-native';
var ToolbarAndroid = require('ToolbarAndroid');
class ToolBarAndroidDemo extends Component {
render() {
return (
<ToolbarAndroid
actions={toolbarActions}
navIcon={require('./ic_menu_black_24dp.png')}
style={styles.toolbar}
subtitle="副标题"
title="主标题"></ToolbarAndroid>
);
}
}
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 (
<ToolbarAndroid
actions={toolbarActions}
style={styles.toolbar}
title="只存在标题"></ToolbarAndroid>
);
}
}
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 (
<ToolbarAndroid
navIcon={require('./ic_menu_black_24dp.png')}
logo={require('./launcher_icon.png')}
actions={toolbarActions}
style={styles.toolbar}
>
</ToolbarAndroid>
);
}
}
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);

从以上可以看出 图标icon与标题不能同时出现在Toolbar中。

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 (
<ToolbarAndroid
navIcon={require('./ic_menu_black_24dp.png')}
logo={require('./launcher_icon.png')}
style={styles.toolbar}>
<SwitchAndroid
value={true}
/>
</ToolbarAndroid>
);
}
}
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);