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一份出来修改就可以了

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!