react-native-scrollable-tab-view组件的简单使用

react-native-scrollable-tab-view是一个滑动tab组件，可在tab之间进行切换显示内容
https://github.com/skv-headless/react-native-scrollable-tab-view

1、安装依赖

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

2、引入组件

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

3、组件使用
系统给我们提供了以下默认两种样式，当然我们也可以自定义
ScrollableTabBar ：Tab可以超过屏幕范围，滚动可以显示
DefaultTabBar : Tab会平分在水平方向的空间

a.使用DefaultTabBar 样式，Tab平分在水平方向的空间

render() {
    return (
<ScrollableTabView
    renderTabBar={() => <DefaultTabBar/>}>
    <Text tabLabel='Tab1'/>
    <Text tabLabel='Tab2'/>
    <Text tabLabel='Tab3'/>
    <Text tabLabel='Tab4'/>
    <Text tabLabel='Tab5'/>
    <Text tabLabel='Tab6'/>
</ScrollableTabView>
);
}

效果如下：

react-native-scrollable-tab-view组件的简单使用

b.使用ScrollableTabBar 样式，Tab超过屏幕范围，滚动显示

render() {
    return (
<ScrollableTabView
    style={styles.container}
    tabBarPosition='top'//tabBarPosition默认top  位于屏幕顶部   bottom位于屏幕底部  overlayTop悬浮在顶部
    initialPage={0} //初始化时被选中的Tab下标，默认是0
    locked={false}//表示手指是否能拖动视图  默认false  true则不能拖动,只可点击
    renderTabBar={() => <ScrollableTabBar />}
    tabBarUnderlineStyle={{backgroundColor: '#FF0000'}}//设置DefaultTabBar和ScrollableTabBarTab选中时下方横线的颜色
    tabBarBackgroundColor='#FFFFFF'//设置整个Tab这一栏的背景颜色
    tabBarActiveTextColor='#9B30FF'//设置选中Tab的文字颜色
    tabBarInactiveTextColor='#7A67EE'//设置未选中Tab的文字颜色
    tabBarTextStyle={{fontSize: 18}}//设置Tab文字的样式
    onChangeTab={(obj) => {//Tab切换之后会触发此方法
      console.log('index:' + obj.i);
    }}
    onScroll={(postion) => {  //视图正在滑动的时候触发此方法
      // float类型 [0, tab数量-1]
      console.log('scroll position:' + postion);
    }}
>
    <View tabLabel='Tab1'>
        <Text>Tab1</Text>
    </View>
    <View tabLabel='Tab2'>
        <Text>Tab2</Text>
    </View>
    <View tabLabel='Tab3'>
        <Text>Tab3</Text>
    </View>
    <View tabLabel='Tab4'>
        <Text>Tab4</Text>
    </View>
    <View tabLabel='Tab5'>
        <Text>Tab5</Text>
    </View>
    <View tabLabel='Tab6'>
        <Text>Tab6</Text>
    </View>
</ScrollableTabView>
);
}

效果如下：

react-native-scrollable-tab-view组件的简单使用

这里有个问题，在使用ScrollableTabBar 样式的时候，假如我们设置了tabBarUnderlineStyle选中状态下划线颜色，默认选中第一个tab没有选中下划线样式，在点击tab的时候才会出现下划线样式，而使用DefaultTabBar样式时没有这种问题，不知道是什么原因，有知道原因的还请告知一下，谢谢。

react-native-scrollable-tab-view组件的简单使用

参考资料：

[React Native]react-native-scrollable-tab-view(入门篇)
http://www.jianshu.com/p/b7788c3d106e
[React Native]react-native-scrollable-tab-view(进阶篇)
http://www.jianshu.com/p/b0cfe7f11ee7
React Native之react-native-scrollable-tab-view详解
http://blog.****.net/xiangzhihong8/article/details/72730951?ref=myread

作者：fozero
声明：原创文章，转载请注意出处！http://www.jianshu.com/p/a729fa3c4754
标签：ReactNative

react-native-scrollable-tab-view组件的简单使用

相关推荐