详细的使用教程和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
仔细看的话，还是有一些区别的。
