RN-常用第三方组件之react-native-scrollab

react-native-scrollable-tab-view 标签导航，可以点击切换，每个 tab 可以有自己的 ScrollView，点击切换的时候可以维护自己的滚动方向。

（以上摘取自网络）
下面记录下自己的使用
地址：https://github.com/skv-headless/react-native-scrollable-tab-view

使用：

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

render() {
        return (
            <ScrollableTabView style={{marginTop:20}}
                renderTabBar={() => <DefaultTabBar tabNames={this.state.tabNames}/>}//忽略这一行，为默认的样式

                tabBarPosition='overlayBottom'//top、bottom、overlayTop、overlayBottom顶部底部悬浮
                onChangeTab= {(obj)=>{console.log('选中了：'+obj.i)}}//切换后调用此方法
                onScroll={(postion)=>{console.log('postion:'+postion)}}//正在滚动调用 0到length-1
                locked={false}//手指是否能拖动视图，默认为false（表示可以拖动）
                initialPage={0}//初始化时被选中的Tab下标，默认是0（即第一页）

                tabBarBackgroundColor="red"//背景色
                tabBarActiveTextColor="blue"//选中的tab的文字颜色
                tabBarInactiveTextColor="yellow"//没有选中的tab的文字颜色
                tabBarTextStyle={{fontSize:17}}//tab的字体的style
                scrollWithoutAnimation={false}//设置“点击”Tab时，视图切换是否有动画，默认为false（即：有动画效果）

            >
                {/*{每个被包含的子视图必须使用tabLabel属性，表示对应Tab显示的文字}*/}
                {/*{每个被包含的子视图必须使用tabLabel属性，表示对应Tab显示的文字}*/}
                {/*{每个被包含的子视图必须使用tabLabel属性，表示对应Tab显示的文字}*/}

                <View tabLabel='Tab1' style={styles.container}>

                    <Text>1</Text>

                </View>

                <View tabLabel='Tab2' style={styles.container}>

                    <Text>2</Text>

                </View>

                <View tabLabel='Tab3' style={styles.container}>

                    <Text>3</Text>

                </View>

                <View tabLabel='Tab4' style={styles.container}>

                    <Text>4</Text>

                </View>

                <View tabLabel='Tab5' style={styles.container}>

                    <Text>5</Text>

                </View>

                <View tabLabel='Tab6' style={styles.container}>

                    <Text>6</Text>

                </View>



            </ScrollableTabView>
        );

默认样式如图

当然也可以自定义tabbar

renderTabBar  这个属性是一个方法，传如Component即可

自定义的Component代码如下：

'use strict';

import React, {Component} from 'react';

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


class DefaultTabBar extends Component {

    propTypes = {
        goToPage: React.PropTypes.func, // 跳转到对应tab的方法
        activeTab: React.PropTypes.number, // 当前被选中的tab下标
        tabs: React.PropTypes.array, // 所有tabs集合,暂未发现有何作用，暂未用到

        tabNames: React.PropTypes.array, // 保存Tab名称，由上一级传入数组
    };



    setAnimationValue({value}) {
        console.log('setAnimationValue'+value);
    }

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

//创建tabbar
    renderTabOption(tab, i) {
        let color = this.props.activeTab == i ? "red" : "black"; // 判断i是否是当前选中的tab，设置不同的颜色

        return (
            <TouchableOpacity onPress={()=>this.props.goToPage(i)} style={styles.tab}>
                <View style={styles.tabItem}>//更复杂的tabbr在此处编码，这里简单的显示了tabbar的名字而已
                    <Text style={{color: color}}>
                        {this.props.tabNames[I]}
                    </Text>
                </View>
            </TouchableOpacity>
        );
    }

    render() {
        //接收由上一级传过来的数组，然后遍历数组添加tabbar
        console.log('tabNames'+this.props.tabNames);
        return (
            <View style={styles.tabs}>
                {this.props.tabNames.map((tab, i) => this.renderTabOption(tab, i))}
            </View>
        );
    }
}

const styles = StyleSheet.create({
    tabs: {
        flexDirection: 'row',
        height: 50,
    },

    tab: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },

    tabItem: {
        flexDirection: 'column',
        alignItems: 'center',
    },
});


export default DefaultTabBar;

使用方法前面的代码里面已经有了

<ScrollableTabView style={{marginTop:20}}
                renderTabBar={() => <DefaultTabBar tabNames={this.state.tabNames}/>}//自定义tabbar样式

              ...

            >

效果如图：

demo:https://github.com/chjwrr/ThirdPartyToolTest

DDBDBB7C-A4EA-4D92-9D72-A3FCB039FF2E.png