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

前端之家收集整理的这篇文章主要介绍了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的样式,系统提供了两种默认的,分别是DefaultTabBarScrollableTabBar

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

原文链接:https://www.f2er.com/react/302503.html

猜你在找的React相关文章