react-native init Demo7

npm install react-native-scrollable-tab-view --savenpm --save

> npm install react-native-vector-icons --save
> rnpm link

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

红色区域就是我们最终需要的图标的名称，即name的值。

首先，自定义一个TabBar组件你需要知道以下几个点：

• 添加必要属性到组件中（必选）

  propTypes = {
    goToPage: React.PropTypes.func,// 跳转到对应tab的方法
    activeTab: React.PropTypes.number,161);">// 当前被选中的tab下标
    tabs: React.PropTypes.array,161);">// 所有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,161);">// 保存Tab名称
  tabIconNames: React.PropTypes.array,161);">// 保存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? "#6B8E23" : "#ADADAD"; // 判断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> ); }renderTabOption(tab,210);">TouchableOpacity> ); }

这个方法应该也比较简单，使用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 'react-native-scrollable-tab-view'
> import WeixinTabBar './WeixinTabBar'

我们最终实现的效果图有4个tab，所以这里定义两个数组tabIconNames，分别表示每个tab显示的文字和图片

constructor(props) {
  super(props);

  this.state = {
      tabNames: ['Tab1','Tab2',152);">'Tab3',152);">'Tab4'],tabIconNames: ['ios-paper',152);">'ios-albums',152);">'ios-paper-plane',152);">'ios-person-add'],};
}

最后，实现render方法

render() { let tabNames = this.state.tabNames; let tabIconNames = this.state.tabIconNames; ScrollableTabView renderTabBar={() => WeixinTabBar tabNames={tabNames} tabIconNames={tabIconNames}/>} tabBarPosition='bottom'> {styles.content} tabLabel='key1'> Text>#1'key2'> Text>#2'key3'> Text>#3'key4'> Text>#4ScrollableTabView> ); }render() { ScrollableTabView> ); }

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

最后，感谢大家耐心看完本篇文章~