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 (
      
        this._renderRightView()}
            title='Github'
            />
        {/* 这里渲染选项卡UI */}
        {this._renderScrollTab()}
      
    );
  }

_renderScrollTab方法的实现：

_renderScrollTab(){
    return (
       }
      >
        
        
        
      
    )
  }

注意：

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

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

扁平化：

扁平.png

立体：

立体.png

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