详细用法看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一份出来修改就可以了