React Native通用Tab组件react-native-scrollable-tab-view自定义TabBar

官方为我们提供了两种基本的Tab控制器样式，DefaultTabBar和ScrollableTabBar。很多情况下，官方的样式并不能满足我们的需求（备注：官方的样式是文字+下划线的风格），那么此时就需要我们自己来实现特定的样式。

开源项目地址：https://github.com/skv-headless/react-native-scrollable-tab-view

常用的就是：文字+图标（带颜色选择器）

react-native-vector-icons 图标库

https://github.com/oblador/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.’ 可见，这个库为我们提供了很多图标，如果你不想花费时间去设计一些图标，不妨使用这个库来替代。

安装组件

npm install react-native-vector-icons --save

安装依赖

rnpm link

注：该命令需要重新编译项目，并且首先需要安装 rmpm

npm install rnpm -g

这个库的图标来源有很多，其中用的最多的是：http://ionicframework.com/docs/v2/ionicons/

使用组件

import Icon from 'react-native-vector-icons/Ionicons';
import IconFont from 'react-native-vector-icons/FontAwesome';

<Icon name="md-alarm" size={20}></Icon>
<IconFont.Button
    name="facebook"
    backgroundColor="#3b5998"
    size={20}
    >
    Login with Facebook
</IconFont.Button>

自定义TabBar的步骤

添加必须的属性类型（3个）

static propTypes = {
    goToPage: React.PropTypes.func, // 跳转到对应tab的方法
    activeTab: React.PropTypes.number, // 当前被选中的tab下标
    tabs: React.PropTypes.array, // 所有tabs集合
};  // 注意这里有分号

如果需要在滑动时的动画，则

componentDidMount() {
    // Animated.Value监听范围 [0, tab数量-1]
    this.props.scrollValue.addListener(this.setAnimationValue);
}

setAnimationValue({value}) {
    console.log('动画值：' + value);
}

render方法需要返回一个组件作为TabBar

注意：即使我们不使用系统的DefaultTabBar和ScrollableTabBar，但tabLabel这个属性必须使用，且值不能重复。

范例源码

index.android.js & index.ios.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React,{Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View
} from 'react-native';

import ScrollableTabView, {DefaultTabBar, ScrollableTabBar} from 'react-native-scrollable-tab-view';

import Icon from 'react-native-vector-icons/Ionicons';
import IconFont from 'react-native-vector-icons/FontAwesome';

import MyTabBar from './MyTabBar';

class RNAPP extends Component {
    constructor(props) {
        super(props);
        this.state = {
            tabNames: ['主页', '分类', '秒杀', '购物车', '我的'],
            tabIconNames: ['md-home', 'md-grid', 'md-time', 'md-cart', 'md-contact'],
        };
    }

    // tabIconNames: ['ios-home', 'ios-grid', 'ios-time', 'ios-cart', 'ios-contact'],

    render() {
        let tabNames = this.state.tabNames;
        let tabIconNames = this.state.tabIconNames;
        return (
            <ScrollableTabView
                // renderTabBar={() => <ScrollableTabBar/>}
                renderTabBar={() => <MyTabBar tabNames={tabNames} tabIconNames={tabIconNames}/>}
                tabBarPosition='bottom'
                locked={false}
                initialPage={0}
                prerenderingSiblingsNumber={1}

                onChangeTab={
                    (obj) => {
                        console.log('被选中的tab下标：' + obj.i);
                    }
                }

                onScroll={
                    (position) => {
                        console.log('滑动时的位置：' + position);
                    }
                }
                >

                <View tabLabel="RNAPP.CC" style={styles.center}>
                    <Text style={{marginBottom:10}} >内容：ReactNative</Text>
                    <IconFont.Button name="facebook" backgroundColor="#3b5998" size={20} >
                        Login with Facebook
                    </IconFont.Button>
                    <Icon
                        name="md-alarm"
                        size={50}
                        style={{marginTop:10, marginBottom:10}}
                        />
                    <IconFont.Button name="twitter" backgroundColor="#3b5998" size={20} >
                        Follow me on Twitter
                    </IconFont.Button>
                    <Text style={styles.author}>
                        Powered by RNAPP.CC
                    </Text>
                </View>

                <View tabLabel="ReactNative" style={styles.center}>
                    <Text >内容：React Native</Text>
                </View>

                <View tabLabel="Android" style={styles.center}>
                    <Text >内容：Android</Text>
                </View>

                <View tabLabel="iOS" style={styles.center}>
                    <Text >内容：iOS</Text>
                </View>

                <View tabLabel="APP开发" style={styles.center}>
                    <Text >内容：APP开发</Text>
                </View>
            </ScrollableTabView>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    center: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
    author: {
        textAlign: 'center',
        color: '#3BC1FF',
        marginTop: 20,
    },
});

AppRegistry.registerComponent('RNAPP', () => RNAPP);

MyTabBar.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    TouchableOpacity,
    View
} from 'react-native';

import Icon from 'react-native-vector-icons/Ionicons';

export default class MyTabBar extends Component {
    static propTypes = {
        goToPage: React.PropTypes.func, // 跳转到对应tab的方法
        activeTab: React.PropTypes.number, // 当前被选中的tab下标
        tabs: React.PropTypes.array, // 所有tabs集合

        tabNames: React.PropTypes.array, // 保存Tab名称
        tabIconNames: React.PropTypes.array, // 保存Tab图标
    };  // 注意这里有分号

    render() {
        return (
            <View style={styles.tabs}>
                {this.props.tabs.map((tab, i) => this.renderTabOption(tab, i))}
            </View>
        );
    }

    componentDidMount() {
        // Animated.Value监听范围 [0, tab数量-1]
        this.props.scrollValue.addListener(this.setAnimationValue);
    }

    setAnimationValue({value}) {
        console.log('动画值：'+value);
    }

    renderTabOption(tab, i) {
        let color = this.props.activeTab == i ? "#6B8E23" : "#ADADAD"; // 判断i是否是当前选中的tab，设置不同的颜色
        return (
            <TouchableOpacity onPress={()=>this.props.goToPage(i)} style={styles.tab} key={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>
        );
    }
}

const styles = StyleSheet.create({
    tabs: {
        flexDirection: 'row',
        height: 50,
    },
    tab: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    tabItem: {
        flexDirection: 'column',
        alignItems: 'center',
    },
});