react-native-scrollable-tab-view使用教程

详细的使用教程和API解释请看[React Native]react-native-scrollable-tab-view(入门篇)，这里实战一个demo，还原最常见的使用场景，目的只有一个--》快速开发，拿来即用。

最终的效果如下图所示：

选项卡

直接上关键代码：

安装插件：

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

引入插件：

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

解释：

TabBar的样式，系统提供了两种默认的，分别是DefaultTabBar和ScrollableTabBar，当然，我们也可以自定义一个。关于自定义方法，请查看自定义TabBar。

render方法中使用该插件：

render() {
    return (
      <View style={styles.container}>
        <NavigationBar
            rightButton={()=>this._renderRightView()}
            title='Github'
            />
        {/* 这里渲染选项卡UI */}
        {this._renderScrollTab()}
      </View>
    );
  }

_renderScrollTab方法的实现：

_renderScrollTab(){
    return (
      <ScrollableTabView
        tabBarInactiveTextColor='mintcream' // 没有被选中的文字颜色
        tabBarActiveTextColor='white'       // 选中的文字颜色
        tabBarBackgroundColor='#D81E06'     // 选项卡背景颜色
        tabBarUnderlineStyle={{backgroundColor:'#fff',height:1}}   //下划线的样式
        initialPage={0}
        renderTabBar={() => <ScrollableTabBar style={{height: 40,borderWidth:0,elevation:2}} tabStyle={{height: 39}}
                                              underlineHeight={2}/>}
      >
        <TabViewList QUERY='ALL' tabLabel='所有'/>
        <TabViewList QUERY='Android' tabLabel='安卓'/>
        <TabViewList QUERY='iOS' tabLabel='IOS'/>
      </ScrollableTabView>
    )
  }

注意：

tabBarUnderlineStyle这个属性才能定义下划线的样式，tabBarUnderlineColor并不能，亲测不可用；

elevation表示的是选项卡的立体效果，如果不写的话，就是扁平化的，可以查看下面的对比图：

扁平化：

扁平.png

立体：

立体.png

仔细看的话，还是有一些区别的。