ReactNative进阶（二十四）：react-native-scrollable-tab-view 标签导航器组件详解

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

最后写上我自己一直喜欢的一句名言：世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它

+ [六、拓展阅读](#_169)

---

一、概述

react-native-scrollable-tab-view 标签导航组件可实现点击切换，每个 tab 可以有自己的 ScrollView，点击切换的时候可以维护自己的滚动方向。

二、使用react-native-scrollable-tab-view插件

1、通过npm将插件加入项目

npm install --save react-native-scrollable-tab-view

2、页面引入插件

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

3、使用插件

三、属性及方法介绍

1. renderTabBar(Function:ReactComponent)

TabBar的样式，系统提供了两种默认的，分别是DefaultTabBar和ScrollableTabBar。
注意：每个被包含的子视图需要使用tabLabel属性，表示对应Tab显示的文字。

• DefaultTabBar：Tab会平分在水平方向的空间。
• ScrollableTabBar：Tab可以超过屏幕范围，滚动可以显示。

2. tabBarPosition(String，默认值’top’)

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

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

• i：被选中的Tab的下标（从0开始）
• ref：被选中的Tab对象（基本用不到）

4. onScroll(Function)
   视图正在滑动的时候触发此方法，包含一个Float类型的数字，范围是[0, tab的数量-1]
5. locked(Bool，默认为false)
   表示手指是否能拖动视图，默认为false（表示可以拖动）。设为true的话，我们只能“点击”Tab来切换视图。
6. initialPage(Integer)
   初始化时被选中的Tab下标，默认是0（即第一页）。
7. page(Integer)
   设置选中指定的Tab。
8. children(ReactComponents)
   表示所有子视图的数组，比如下面的代码，children则是一个长度为6的数组，元素类型为Text。

render() {
  return (
    <ScrollableTabView
      renderTabBar={() => <DefaultTabBar/>}>
      <Text tabLabel='Tab1'/>
      <Text tabLabel='Tab2'/>
      <Text tabLabel='Tab3'/>
      <Text tabLabel='Tab4'/>
      <Text tabLabel='Tab5'/>
      <Text tabLabel='Tab6'/>
    </ScrollableTabView>
  );
}

9. tabBarUnderlineStyle(style)
   设置DefaultTabBar和ScrollableTabBarTab选中时下方横线的颜 色。
10. tabBarBackgroundColor(String)
    设置整个Tab这一栏的背景颜色
11. tabBarActiveTextColor(String)
    设置选中Tab的文字颜色。
12. tabBarInactiveTextColor(String)
    设置未选中Tab的文字颜色。
13. contentProps(Object)
    这里要稍微说下react-native-scrollable-tab-view的实现，其实在Android平台底层用的是ViewPagerAndroid，iOS平台用的是ScrollView。这个属性的意义是：比如我们设置了某个属性，最后这个属性会被应用在ScrollView/ViewPagerAndroid，这样会覆盖库里面默认的，通常官方不建议我们去使用。
14. scrollWithoutAnimation(Bool，默认为false)
    设置“点击”Tab时，视图切换是否有动画，默认为false（即：有动画效果）。

四、Demo

示例代码案例：

<ScrollableTabView
          renderTabBar={() => <DefaultTabBar style={styles.tabStyle} />}
          tabBarActiveTextColor="#28C35A"
          tabBarUnderlineStyle={styles.lineStyle}
          tabBarInactiveTextColor="#000000"
          tabBarBackgroundColor="#fff"
          locked={false}
          onScroll={(obj) => {
            //无需写业务逻辑，滑动会自动调用onChangeTab事件
          }}
          onChangeTab={obj => {
            //业务逻辑 obj.i 标识第几个tab，从0开始
            if (obj.i == 0) {
            } else if (obj.i == 1) {
            } else if (obj.i == 2) {
            }
          }}


### 最后

**一个好的心态和一个坚持的心很重要**，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

**分享一些前端面试题以及学习路线给大家**

![](https://img-blog.csdnimg.cn/img_convert/c9164b347471de9f08a4cd779ac7edcf.webp?x-oss-process=image/format,png)

![](https://img-blog.csdnimg.cn/img_convert/93856de0f59f39a49773b5a8830c778e.webp?x-oss-process=image/format,png)

n.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

**分享一些前端面试题以及学习路线给大家**

[外链图片转存中...(img-xh3n54P0-1715793938420)]

[外链图片转存中...(img-LmJsR1WD-1715793938421)]