RN之滑动TabBar(react-native-scrollable-tab-view)

详细用法看GitHub:https://github.com/skv-headless/react-native-scrollable-tab-view

效果图:

一.安装并将依赖版本信息保存到package中

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

二.导入依赖

var ScrollableTabView=require("react-native-scrollable-tab-view");

三.基本用法

var ScrollableTabView = require('react-native-scrollable-tab-view');

var App = React.createClass({
render() {
return (
<ScrollableTabView>
<ReactPage tabLabel="React" />
<FlowPage tabLabel="Flow" />
<JestPage tabLabel="Jest" />
</ScrollableTabView>
);
}
});

四.其他属性看GitHub

五.renderTabBar系统提供的样式，可做成类似今天头条的多个tab滑动分类

TabBar的样式，系统提供了两种默认的，分别是

DefaultTabBar

和

ScrollableTabBar

。

DefaultTabBar:在一个屏幕内平方tab，默认的。

ScrollableTabBar：允许tab超过屏幕，超过可滑动。

如何使用这个系统默认的样式:

①导入两个系统默认样式组件DefaultTabBar和ScrollableTabBar

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

②在renderTabBar函数中返回系统默认的样式组件

renderTabBar={()=><ScrollableTabBar/>}

ScrollableTabBar可滑动Tab的效果图：

六.自定义renderTabBar

自定义的话可点开参考node_modules里面react-native-scrollable-tab-view 提供的系统默认样式,直接copy一份出来修改就可以了