基础篇章：关于 React Native 之 ToolbarAndroid 组件的讲解

组件已经讲了不少了，相信大家对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，我哥哥样子一模一样啊？

实例代码

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);