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 (
 }>
    
    
    
    
    
    

);
}

效果如下：

Paste_Image.png

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

render() {
    return (
 }
    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);
    }}
>
    
        Tab1
    
    
        Tab2
    
    
        Tab3
    
    
        Tab4
    
    
        Tab5
    
    
        Tab6
    

);
}

效果如下：

Paste_Image.png

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

Paste_Image.png

参考资料：

• [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.csdn.net/xiangzhihong8/article/details/72730951?ref=myread

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