react-native-scrollable-tab-view介绍

示例:

2018-03-02 14-11-52屏幕截图.png

效果:

image.png

image.png


使用:

添加react-native-scrollable-tab-view

npm i -S react-native-scrollable-tab-view

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

属性:

1.renderTabBar

TabBar的样式,系统提供了两种默认的,分别是DefaultTabBar和ScrollableTabBar。当然,我们也可以自定义一个,我们会在下篇文章重点讲解如何去自定义TabBar样式。

注意:每个被包含的子视图需要使用tabLabel属性,表示对应Tab显示的文字。

DefaultTabBar:Tab会平分在水平方向的空间。

ScrollableTabBar:Tab可以超过屏幕范围,滚动可以显示。

2.tabBarPosition(String,默认值'top')

top:位于屏幕顶部

bottom:位于屏幕底部

overlayTop:位于屏幕顶部,悬浮在内容视图之上(看颜色区分:视图有颜色,Tab栏没有颜色)

overlayBottom:位于屏幕底部,悬浮在内容视图之上(看颜色区分:视图有颜色,Tab栏没有颜色)

3.tabBarUnderlineStyle(style)

设置DefaultTabBar和ScrollableTabBarTab选中时下方横线的颜色。

4.tabBarBackgroundColor(String)

设置整个Tab这一栏的背景颜色

5.tabBarActiveTextColor(String)

设置选中Tab的文字颜色。

6.tabBarInactiveTextColor(String)

设置未选中Tab的文字颜色。

还有一些其他的属性没有使用,以后补充

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容