React Native 实通用 Tab 组件 react-native-scrollable-tab-view 学习记录

开源项目地址：https://github.com/skv-headless/react-native-scrollable-tab-view

当前项目目录：npm i react-native-scrollable-tab-view --save --force

导入：import ScrollableTabView from 'react-native-scrollable-tab-view';

属性介绍：

1.renderTabBar renderTabBar={() => }

TabBar 的样式，系统提供了两种默认的，分别是 DefaultTabBar 和 ScrollableTabBar，也可以自定义

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

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

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

2.tabBarPosition 位置默认为'top'

tabBarPosition='top' ['top','bottom','overlayTop','overlayBottom']

3.onChangeTab

Tab 切换之后会触发此方法，包含一个参数（Object 类型），这个对象有两个参数
i：被选中的 Tab 的下标（从 0 开始）
ref：被选中的 Tab 对象（基本用不到）

4.onScroll

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

5.locked

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

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

7.page(Integer) 设置选中指定的 Tab 作者打算废除

8.children(ReactComponents) 表示所有子视图的数组

9.tabBarUnderlineColor(String)

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

10.tabBarBackgroundColor(String)

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

11.tabBarActiveTextColor(String)

设置选中 Tab 的文字颜色

12.tabBarInactiveTextColor(String)

设置未选中 Tab 的文字颜色

13.tabBarTextStyle(Object)

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

14.style (View.propTypes.style) 系统 View 都拥有的属性

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

16.scrollWithoutAnimation(Bool，默认为 false)

设置“点击”Tab 时，视图切换是否有动画，默认为 false（即：有动画效果）这个属性的设置对滑动视图切换的动画效果没有影响，仅仅对“点击”Tab 效果有作用

17.prerenderingSiblingsNumber(Integer，默认为 0)

预渲染附件视图的个数 为 0 只渲染当前页