【React Native开发】- scrollable-tab-view的使用

1.添加react-native-scrollable-tab-view

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

安装成功显示：

2.导入组件

若 renderTabBar={() => <DefaultTabBar/>

import ScrollableTabView ,{DefaultTabBar }from 'react-native-scrollable-tab-view'
若 renderTabBar={() => <ScrollableTabBar/>

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

3.props介绍

● renderTabBar(Function ReactComponent)

TabBar的样式，系统提供了两种默认的，分别是DefaultTabBar和ScrollableTabBar。

当然我们可以完全自定义我们需要的样式。

注意：每个被包含的子视图需要使用tabLabel属性，表示对应Tab显示的文字
● DefaultTabBar：Tab会平分在水平方向的空间

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

export default class ScrollableTab extends Component{
    constructor(props){
        super(props)
    }
    render(){
        return (
            <View style={styles.container}>
                <ScrollableTabView
                    renderTabBar={() => <DefaultTabBar/>}>
                    <Text tabLabel='Tab1'>Tab1</Text>
                    <Text tabLabel='Tab2'>Tab2</Text>
                    <Text tabLabel='Tab3'>Tab3</Text>
                    <Text tabLabel='Tab4'>Tab4</Text>
                    <Text tabLabel='Tab5'>Tab5</Text>
                    <Text tabLabel='Tab6'>Tab6</Text>
                </ScrollableTabView>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container:{
        flex:1,
    }
})
效果显示：

● ScrollableTabBar：Tab可以超过屏幕范围，滚动可以显示

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

● tabBarPosition(String，默认值'top')

top：位于屏幕顶部

bottom：位于屏幕底部

tabBarPosition="bottom"
效果显示：

overlayTop：位于屏幕顶部，悬浮在内容视图之上（看颜色区分：视图有颜色，Tab栏没有颜色）

overlayBottom：位于屏幕底部，悬浮在内容视图之上（看颜色区分：视图有颜色，Tab栏没有颜色）

● onChangeTab(Function)

Tab切换之后会触发此方法，包含一个参数（Object类型），这个对象有两个参数
i：被选中的Tab的下标（从0开始）
ref：被选中的Tab对象（基本用不到）

onChangeTab={(obj) => {
    console.log('index:' + obj.i);
} }

●onScroll(Function)
视图正在滑动的时候触发此方法，包含一个Float类型的数字，范围是[0, tab数量-1]

onScroll={(postion) => {
    // float类型 [0, tab数量-1]  
    console.log('scroll position:' + postion);
}}

●locked(Bool，默认为false)

locked={true}

表示手指是否能拖动视图，默认为false（表示可以拖动）。设为true的话，我们只能“点击”Tab来切换视图。

●children(ReactComponents)
表示所有子视图的数组

● tabBarUnderlineStyle(style)
设置DefaultTabBar和ScrollableTabBarTab选中时下方横线的颜色

● tabBarBackgroundColor(String)
设置整个Tab这一栏的背景颜色

● tabBarActiveTextColor(String)
设置选中Tab的文字颜色

●tabBarInactiveTextColor(String)
设置未选中Tab的文字颜色

● tabBarTextStyle(Object)
设置Tab文字的样式，比如字号、字体等

●style()
系统View都拥有的属性，基本不会涉及到。

● contentProps(Object)
其实在Android平台底层用的是ViewPagerAndroid，iOS平台用的是ScrollView。这个属性的意义是：比如我们设置了某个属性，最后这个属性会被应用在ScrollView/ViewPagerAndroid，这样会覆盖库里面默认的，通常官方不建议我们去使用。

●scrollWithoutAnimation(Bool，默认为false)
设置“点击”Tab时，视图切换是否有动画，默认为false（即：有动画效果）。

4.自定义TabBar的样式

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

我们现在自定义的TabBar如图所示：

 4.1 自定义TabBar

自定义一个TabBar,我们命名为MyTabBar,添加必要属性到组件中：

propTypes = {
    //前三个必选
    goToPage: React.PropTypes.func,// 跳转到对应tab的方法
    activeTab: React.PropTypes.number,// 当前被选中的tab下标
    tabs: React.PropTypes.array,// 所有tabs集合

    backgroundColor: React.PropTypes.string,
    activeTextColor: React.PropTypes.string,
    inactiveTextColor: React.PropTypes.string,
    textStyle: Text.propTypes.style,
    tabStyle: View.propTypes.style,
    renderTab: React.PropTypes.func,
    underlineStyle: View.propTypes.style,
}
我们的Tab名称不希望写死，我们最好是外部组件props传递过来,有利于扩展，我么添加属性props:tabNames
tabNames: React.PropTypes.array, // 保存Tab

render()方法：
render(){
    return (
        <View style={styles.tabs}>
            {this.props.tabs.map((tab, i) => this.renderTabOption(tab, i))}
        </View>
    )
}
renderTabOption(tab, i) {
    const color = this.props.activeTab == i? "#6B8E23" : "#ADADAD"; // 判断i是否是当前选中的tab，设置不同的颜色
    return (
        <TouchableOpacity key={i} onPress={()=>this.props.goToPage(i)} style={styles.tab}>
            <View style={styles.tabItem}>
                <Text style={{color: color}}>
                    {this.props.tabNames[i]}
                </Text>
            </View>
        </TouchableOpacity>
    );
}
样式
const styles = StyleSheet.create({
    tab: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        paddingBottom: 10,
    },
    tabs: {
        height: 50,
        flexDirection: 'row',
        justifyContent: 'space-around',
        borderWidth: 1,
        borderTopWidth: 0,
        borderLeftWidth: 0,
        borderRightWidth: 0,
        borderColor: '#ccc',
    },
    tabItem:{},
})

4.3 使用MyTabBar

import ScrollableTabView from 'react-native-scrollable-tab-view'
import MyTabBar from './MyTabBar'
constructor(props){
    super(props)
    this.state = {
        tabNames: ['首页', '发现', '订单', '我的'],
    }
}
render() {
    let tabNames = this.state.tabNames;
    return (
        <ScrollableTabView
            renderTabBar={() => <MyTabBar tabNames={tabNames}/>}
            tabBarPosition='bottom'>
            <View style={styles.content} tabLabel='key1'>
                <Text>#1</Text>
            </View>
            <View style={styles.content} tabLabel='key2'>
                <Text>#2</Text>
            </View>
            <View style={styles.content} tabLabel='key3'>
                <Text>#3</Text>
            </View>
            <View style={styles.content} tabLabel='key4'>
                <Text>#4</Text>
            </View>
        </ScrollableTabView>
    );
}
样式
const styles = StyleSheet.create({
    container:{
        flex:1,
    },
    content:{
        
    }
})