开源项目react-native-scrollable-tab-view的基本使用方法

准备工作

1.1.新建一个项目

1.2.添加react-native-scrollable-tab-view

Props介绍

2.1.renderTabBar(Function:ReactComponent)

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

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

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

ScrollableTabBar：Tab可以超过屏幕范围，滚动可以显示

2.2.tabBarPosition(String，默认值'top')

top：位于屏幕顶部

bottom：位于屏幕底部

overlayTop：位于屏幕顶部，悬浮在内容视图之上（看颜色区分：视图有颜色，Tab栏没有颜色）

overlayBottom：位于屏幕底部，悬浮在内容视图之上（看颜色区分：视图有颜色，Tab栏没有颜色）

2.3.onChangeTab(Function)

Tab切换之后会触发此方法，包含一个参数（Object类型），这个对象有两个参数

i：被选中的Tab的下标（从0开始）

ref：被选中的Tab对象（基本用不到）

2.4.onScroll(Function)

视图正在滑动的时候触发此方法，包含一个Float类型的数字，范围是[0, tab数量-1]

2.5.locked(Bool，默认为false)

表示手指是否能拖动视图，默认为false（表示可以拖动）。设为true的话，我们只能“点击”Tab来切换视图。

2.6.initialPage(Integer)

初始化时被选中的Tab下标，默认是0（即第一页）

2.7.page(Integer)

设置选中指定的Tab（直接用没有任何效果，需要修改下代码）
设置方法：Ctrl+左击ScrollableTabView，或者在node_modules文件夹中找到React-native-scrollable-tab-view中打开index.js文件。找到其中的getDefaultProps方法，将其中的page:-1改为page；然后到getInitialState方法中将initialPage都改成page就可以了。这里我觉得page和initialPage使用任意一个就可以了，用途应该差不多。

2.8.children(ReactComponents)

表示所有子视图的数组，比如下面的代码，children则是一个长度为6的数组，元素类型为Text

2.9.tabBarUnderlineColor(String)

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

2.10.tabBarBackgroundColor(String)

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

2.11.tabBarActiveTextColor(String)

设置选中Tab的文字颜色

2.12.tabBarInactiveTextColor(String)

设置未选中Tab的文字颜色

2.13.tabBarTextStyle(Object)

设置Tab文字的样式，比如字号、字体等

上面这5个样式示例如下：

2.14.style(View.propTypes.style)

系统View都拥有的属性，基本不会涉及到。

2.15.contentProps(Object)

这里要稍微说下react-native-scrollable-tab-view的实现，其实在Android平台底层用的是ViewPagerAndroid，iOS平台用的是ScrollView。这个属性的意义是：比如我们设置了某个属性，最后这个属性会被应用在ScrollView/ViewPagerAndroid，这样会覆盖库里面默认的，通常官方不建议我们去使用。

2.16.scrollWithoutAnimation(Bool，默认为false)

设置“点击”Tab时，视图切换是否有动画，默认为false（即：有动画效果）。

注意：这个属性的设置对滑动视图切换的动画效果没有影响，仅仅对“点击”Tab效果有作用。看下下面动态图的对比