React Native入门——布局实践：开发京东客户端首页（二）TabBar的构建

上篇文章讲到构建京东客户端首页的搜索栏，本篇我们一起来学习TabBar的构建。

根据之前的调研，在构建TabBar的方式上，我推荐使用国外大神James Ide（https://github.com/ide）发布在Exponent上的react-native-tab-navigator（https://github.com/exponentjs/react-native-tab-navigator），这位大神封装的控件简单易用，而且更新速度还是跟得上的，甚至使用了一些ES7语法，同时他回复ISSUE的速度也很不错，我就问过他一个问题，过了一会儿就回复了。

不说那么多了，首先来看一下TabBar的效果和布局分析吧：

TabBar的外层为一个View（水平排布），内部为5个组合图标，当选中时，切换相关页面，TabBar按钮呈现红色，非选中时呈现白色，这些图标也是已有UI切好的图，所以逻辑处理比较简单，主要控制好效果即可。

1.引入react-native-tab-navigator

我们可以在当前工程目录下，使用npm i react-native-tab-navigator --save引入tab库，目前最新版本为0.2.15

接着，我们在MainScreen类中将Tab控件import进来，具体代码如下：

import TabNavigator from 'react-native-tab-navigator';

export default class MainScreen extends Component {
    render() {
        return (
            <View style={
  {fle