React-Native文章react-native-scrollable-tab-view(进阶篇)

React Native系列文章(十
一)react-native-scrollable-tab-view(进阶篇)
很多情况下，官方的样式并不能满足我们的需求(备注：官方的样式是文字+下划线的风格)，那么此时就需要我们自己来实现特定的样式。

本文要实现这样的效果：
一、准备工作
1.新建一个项目
react-native init Demo7
2.添加react-native-scrollable-tab-view
npm install react-native-scrollable-tab-view --save
3.添加react-native-vector-icons
> 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"
react-native-vector-icons介绍：
一个“图标”库，官方描述为‘3000 Customizable Icons for React Native with support for NavBar/TabBar/ToolbarAndroid, image source and full stying.’可见，这个库为我们提供了很多图标，如果你不想花费时间去设计一些图标，不妨使用这个库来替代。

有趣的是，这个库的图标来源有很多，下面大概列举了一些：
Entypo by Daniel Bruce (411icons)
EvilIcons by Alexander Madyankin & Roman Shamin (v1.8.0,70icons)
FontAwesome by Dave Gandy (v4.6.3,634icons)
Foundation by ZURB, Inc. (v3.0,283icons)
Ionicons by Ben Sperry (v3.0.0,859icons)
MaterialIcons by Google, Inc. (v2.2.3,932icons)
Octicons by Github, Inc. (v3.5.0,166icons)
Zocial by Sam Collins (v1.0,100icons)
其中用的最多的是Ionicons ，所以本篇文章的图标来源也就选择它了。

另外，react-native-vector-icons的用法非常的多，我们今天只会用到3个基本属性：
其中，name就是你要使用的图标名称，如果我们选择Ionicons ，让我们看下如何找到你需要的图标，进入Ionicons ，我们看到如下的界面
红色区域输入你想要的图标名称(英文哈~)，比如我们输入search，结果页面如下
每个图标，都提供了iOS、iOS-Outline、Material Design三种不同风格的样式，点击结果中的某一行数据，出现如下界面
红色区域就是我们最终需要的图标的名称，即name的值。

二、开始工作
首先，自定义一个TabBar组件你需要知道以下几个点：
添加必要属性到组件中(必选)
propTypes = {
goToPage: React.PropTypes.func, // 跳转到对应tab的方法activeTab: React.PropTypes.number, // 当前被选中的tab下标
tabs: React.PropTypes.array, // 所有tabs集合
}
实现setAnimationValue(可选，如果你需要在tab切换的时候有动画效果) setAnimationValue({value}) {
}
render方法需要返回一个组件作为TabBar
跟其他任何组件一样，你可以传递自己的props
好了，介绍完要点，我们就开始编写TabBar组件了。

1.新建一个WeixinTabBar.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 (
{this.props.tabs.map((tab, i) => this.renderTabOption(tab, i))}
);
}
这个方法很简单，返回一个容器View，容器View内包含的子View是通过遍历tabs，调用renderTabOption方法来动态生成的。

4.实现renderTabOption方法
renderTabOption(tab, i) {
const color = this.props.activeTab == i? "#6B8E23" : "#ADADAD"; // 判断i是否是当前选中的tab，设置不同的颜色
return (
this.props.goToPage(i)} style={styles.tab}>
<ICON< p>
name={this.props.tabIconNames[i]} // 图标
size={30}
color={color}/>
{this.props.tabNames[i]}
);
}
这个方法应该也比较简单，使用TouchableOpacity包裹两个View：Icon
和Text。

代码分析：
---------------------------start---------------------------
首先，判断i是否是当前选中的activeTab，来使用不同的颜色，然后：
TouchableOpacity：点击触发onPress方法，使用goToPage跳转到对应的tab
Icon：设置name(图标，使用tabIconNames[i]获取)，size(图标大小)，color(图标颜色)
Text：设置文本(使用tabNames[i]获取)，color(文字颜色)
---------------------------end---------------------------
5.使用WeixinTabBar
打开index.android.js文件，导入ScrollableTabView 和 WeixinTabBar > import ScrollableTabView from 'react-native-scrollable-tab-view' > import WeixinTabBar from './WeixinTabBar'
我们最终实现的效果图有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< p>
renderTabBar={() => }
tabBarPosition='bottom'>
#1
#2
#3
#4
);
}
其中renderTabBar使用我们自定义的WeixinTabBar。

需要说明的是，即使我们不使用系统的DefaultTabBar和ScrollableTabBar，但tabLabel这个属性必须使用，且值不能重复。