组件已经讲了不少了，相信大家对React Native都已经有了很多了解和自己的理解了，相信聪明的开发者已经发现了，这些组件的用法和我们原生开发中控件都是类似的，大同小异的，只不过是用的语言不太相同罢了，学得快的同学可以去官网直接看官方文档学习了。今天我们讲ToolbarAndroid，顾名思义，这个组件只能在Android平台用，而且跟Android原生中的Toolbar控件基本一样。
大家好，我是ToolbarAndroid，在React Native中是一个包装了仅限Android平台的工具栏控件的React组件。我可以显示一个标志，一个导航图标（譬如汉堡形状的菜单按钮），一个标题与副标题，以及一个功能列表。标题和副标题会在中间显示，徽标和导航图标会在左侧显示，而功能列表则在右侧显示。
如果我的工具栏上只有一个子节点，那么它将在标题与功能列表之间显示。
熟悉Android toolbar的朋友肯定就会熟悉我，因为我和它就像是双胞胎一样的好朋友，毕竟我就是根据它而定制的嘛。
特别注意：尽管我上面的标识（徽标）和导航图标可以显示远程图片，也就是从服务器和网络获取，但是仅限开发者模式，如果在发行（release）模式下，你永远都应该用图片资源来渲染这些图标。使用require('./some_icon.png')会自动帮你包装好，所以只要你不直接用{uri:'http://...'}，就没什么问题。
性格特点
看完我的简单介绍，那就一起来看看我有哪些属性吧，还是那句话，只有熟悉了我的性格特点，知彼知己，才能运用自如嘛。
- actions 设置功能列表的属性，这跟android原生中的toolbar简直太像了，有如下属性[{title: string, icon: optionalImageSource, show: enum('always', 'ifRoom', 'never'), showWithText: bool}] 。
- title 功能标题
- icon 功能图标
- show icon显示还是隐藏，在弹出菜单里显示：always总是显示，ifRoom如果放的下则显示，或者never从不显示。
- showWithText bool值，是否在显示图标的地方同时还显示文字
- contentInsetEnd 设置Toolbar的右边和屏幕右边缘的距离
- contentInsetStart 作用同上，与上面正好相反
- logo 设置toolbar的标志，徽标也就是logo
- navIcon 设置导航图标
- onActionSelected func 当右边功能列表一个功能被选中的时候调用此回调。传递给此回调的唯一参数是该功能在actions数组中的位置
- onIconClicked func 当图标被点击时，回调此函数
- overflowIcon 设置功能列表的弹出菜单的图标
- rtl bool 设置toolbar的排列顺序为从右到左。除了将这一属性设为true以外，你还需要在AndroidManifest.xml中添加：android:supportsRtl="true"以及在MainActivity的onCreate方法中调用 setLayoutDirection(LayoutDirection.RTL)
- subtitle 设置子（副）标题
- subtitleColor 设置子（副）标题字体颜色
- title 设置标题
- titleColor 设置标题字体颜色
实例代码
来，看实例代码前，我们先来看看和我玩好之后，我的样子，怎么样，是不是和Android中的toobar，我哥哥样子一模一样啊？
实例代码
代码语言：javascript复制import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
var ToolbarAndroid = require('ToolbarAndroid');
var toolbarActions = [
{title: 'weibo', icon: require('./image/icon_weibo.png'), show: 'always'},
{title: 'loonggg'},
{title: 'blog', icon: require('./image/icon_blog.png'), show: 'always'},
];
export default class ToolbarDemo extends Component {
render() {
return (
<View style={styles.container}>
<ToolbarAndroid
actions={toolbarActions}
navIcon={require('./image/menu_icon.png')}
logo={require('./image/logo.png')}
style={styles.toolbar}
subtitle="非著名程序员"
subtitleColor="#ffffff"
titleColor="#ffffff"
title="涩郎"/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
},
toolbar: {
backgroundColor: '#c6c5b9',
height: 56,
},
});
AppRegistry.registerComponent('ToolbarDemo', () => ToolbarDemo);
