在上一篇文章中，我们学习了react-native-scrollable-tab-view的基本使用方法，以及一些基本Props的使用介绍等。从源码中我们知道它提供了两种基本的tab控制器样式，DefaultTabBar和ScrollableTabBar。很多情况，基本的样式(文字加下划线的样式)并不能满足我们的需求，这个时候我们就要自己来实现特定的样式啦。
今天讲的就是如何来自定义tab的样式，这篇文章是建立在上篇的基础之上，所以还没有阅读的朋友可以先去参考下[React Native]react-native-scrollable-tab-view(一)。
本文要实现是图片+文字的样式，就像微信的底部导航栏的效果；
准备工作
1、新建一个项目
react-native init TabDemo1
2、添加 react-native-scrollable-tab-view的三方库依赖
npm install react-native-scrollable-tab-view --save
3、添加react-native-vector-icons的三方库依赖，一个图标的库
react-native-vector-icons介绍：
一个“图标”库，官方描述为3000 Customizable Icons for React Native with support for NavBar/TabBar/ToolbarAndroid, image source and full stying.可见，这个库为我们提供了很多图标，如果你不想花费时间去设计一些图标，不妨使用这个库来替代。
这个库的图标来源有很多，下面大概列举了一些：
Entypoby Daniel Bruce (411icons)
EvilIconsby Alexander Madyankin & Roman Shamin (v1.8.0,70icons)
FontAwesomeby Dave Gandy (v4.6.3,634icons)
Foundationby ZURB, Inc. (v3.0,283icons)
Ioniconsby Ben Sperry (v3.0.0,859icons)
MaterialIconsby Google, Inc. (v2.2.3,932icons)
Octiconsby Github, Inc. (v3.5.0,166icons)
Zocialby Sam Collins (v1.0,100icons)
其中用的最多的是Ionicons，所以本篇文章的图标来源也就选择它了。另外，react-native-vector-icons的用法非常的多，今天只会用到3个基本属性：
size ：设置图标的大小
name：设置使用的图标
color：设置图标的颜色系统默认
添加依赖方法如下：
npm install react-native-vector-icons --save
rnpm link
rnpm是一个React Native包管理器，我们也可以通过编辑android/app/build.gradle
添加下面的行达到同样的目的:
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
具体实现步骤
自定义一个TabBar组件你需要的了解以下几点：
a.添加必要属性到组件中（必选）
propTypes = {
goToPage: React.PropTypes.func, // 跳转到对应tab的方法
activeTab: React.PropTypes.number, // 当前被选中的tab下标
tabs: React.PropTypes.array, // 所有tabs集合
}
b.实现setAnimationValue（可选，如果你需要在tab切换的时候有动画效果）
setAnimationValue({value}) {
}
c.render方法需要返回一个组件作为TabBar
d.跟其他任何组件一样，你可以传递自己的props
好了，介绍完要点，我们就开始编写自己的TabBar组件了。
1、新建一个MyTabBar.js文件，导入Ionicons 。
import Icon from 'react-native-vector-icons/Ionicons';
2、我们希望每个Tab的图标和名称都是外部组件通过prop传递进来，而不是内部写死，这样有利于扩展，所以我们添加两个prop：tabNames和tabIconNames
propTypes = {
...
tabNames: React.PropTypes.array, // 保存Tab名称
tabIconNames: React.PropTypes.array, // 保存Tab图标
}
3、实现render方法
render() {
return (
<View style={styles.tabs}>
{this.props.tabs.map((tab, i) => this.renderTabOption(tab, i))}
</View>
);
}
这个方法很简单，返回一个容器View，容器View内包含的子View是通过遍历tabs，调用renderTabOption方法来动态生成的。
4、实现renderTabOption方法
renderTabOption(tab, i) {
const color = this.props.activeTab == i? "#2D2F46" : "#B2B4C6"; // 判断i是否是当前选中的tab，设置不同的颜色
return (
<TouchableOpacity onPress={()=>this.props.goToPage(i)} style={styles.tab}>
<View style={styles.tabItem}>
<Icon
name={this.props.tabIconNames[i]} // 图标
size={30}
color={color}/>
<Text style={{color: color}}>
{this.props.tabNames[i]}
</Text>
</View>
</TouchableOpacity>
);
}
这个方法应该也比较简单，使用TouchableOpacity包裹两个View：Icon和Text。
代码分析：
首先，判断i是否是当前选中的activeTab，来设置不同的字体颜色，然后：TouchableOpacity：点击触发onPress方法，使用goToPage跳转到对应的tab
Icon：设置name(图标，使用tabIconNames[i]获取)，size(图标大小)，color(图标颜色)
Text：设置文本（使用tabNames[i]获取），color(文字颜色)
---------------------------end---------------------------
5、使用MyTabBar
打开index.android.js文件，导入ScrollableTabView 和 MyTabBar
import ScrollableTabView from 'react-native-scrollable-tab-view'
import MyTabBar from './MyTabBar'
我们最终实现的效果图有4个tab，所以这里定义两个数组tabNames和tabIconNames，分别表示每个tab显示的文字和图片
constructor(props) {
super(props);
this.state = {
tabNames: ['Tab1', 'Tab2', 'Tab3', 'Tab4'],
tabIconNames: ['ios-paper', 'ios-albums', 'ios-paper-plane', 'ios-person-add'],
};
}
最后，实现render方法
render() {
let tabNames = this.state.tabNames;
let tabIconNames = this.state.tabIconNames;
return (
<ScrollableTabView
renderTabBar={() => <MyTabBar
tabNames={tabNames}
tabIconNames={tabIconNames}/>}
tabBarPosition='bottom'>
<View style={styles.content} tabLabel='key1'>
<Text>第一个tab页</Text>
</View>
<View style={styles.content} tabLabel='key2'>
<Text>第二个tab页</Text>
</View>
<View style={styles.content} tabLabel='key3'>
<Text>第三个tab页</Text>
</View>
<View style={styles.content} tabLabel='key4'>
<Text>第四个tab页</Text>
</View>
</ScrollableTabView>
);
}
其中renderTabBar使用了我们自定义的MyTabBar。需要说明的是，即使我们不使用系统的DefaultTabBar和ScrollableTabBar，但tabLabel这个属性必须设置，且值不能重复，不知道为啥，有大神知道的话，可以留言。
