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

冷不防 2023-01-20 06:58 72阅读 0赞

### 文章目录 ###

*   *  一、概述
     *  二、使用react-native-scrollable-tab-view插件
     *  三、属性及方法介绍
     *  四、Demo
     *  五、注意事项
     *  六、拓展阅读

--------------------

## 一、概述 ##

`react-native-scrollable-tab-view` 标签导航组件可实现点击切换，每个 `tab` 可以有自己的 `ScrollView`，点击切换的时候可以维护自己的滚动方向。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmh1YXFpYW5nMQ_size_16_color_FFFFFF_t_70]

## 二、使用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可以超过屏幕范围，滚动可以显示。

1.  `tabBarPosition(String，默认值’top’)`

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

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

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

1.  `onScroll(Function)`  
    视图正在滑动的时候触发此方法，包含一个Float类型的数字，范围是`[0, tab的数量-1]`
2.  `locked(Bool，默认为false)`  
    表示手指是否能拖动视图，默认为`false`（表示可以拖动）。设为`true`的话，我们只能“点击”Tab来切换视图。
3.  `initialPage(Integer)`  
    初始化时被选中的Tab下标，默认是0（即第一页）。
4.  `page(Integer)`  
    设置选中指定的Tab。
5.  `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>
      );
    }

1.  `tabBarUnderlineStyle(style)`  
    设置`DefaultTabBar`和`ScrollableTabBarTab`选中时下方横线的颜 色。
2.  `tabBarBackgroundColor(String)`  
    设置整个Tab这一栏的背景颜色
3.  `tabBarActiveTextColor(String)`  
    设置选中Tab的文字颜色。
4.  `tabBarInactiveTextColor(String)`  
    设置未选中Tab的文字颜色。
5.  `contentProps(Object)`  
    这里要稍微说下`react-native-scrollable-tab-view`的实现，其实在`Android`平台底层用的是`ViewPagerAndroid`，`iOS`平台用的是`ScrollView`。这个属性的意义是：比如我们设置了某个属性，最后这个属性会被应用在`ScrollView/ViewPagerAndroid`，这样会覆盖库里面默认的，通常官方不建议我们去使用。
6.  `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) { 
                }
              }}
            >
              <View tabLabel="图文">
                <FlatList
                  data={ this.state.textImageList}
                  renderItem={ this.renderImageTextItem.bind(this)}
                  onEndReachedThreshold={ 0.01}
                  onRefresh={ () => this.getFirstThreadList(0,0,true)}
                  onEndReached={ () => this.loadMore(0)}
                  ListFooterComponent={ 
                    this.state.textImageList.length > 0 && this.state.isImageAll
                      ? this._footer
                      : null
                  }
                  refreshing={ this.state.refreshing}
                  keyExtractor={ this.keyExtractor}
                />
              </View>
              <View tabLabel="问答">
                <FlatList
                  data={ this.state.questionAnswerList}
                  renderItem={ this.renderQuestionItem.bind(this)}
                  onEndReachedThreshold={ 0.01}
                  onRefresh={ () => this.getFirstThreadList(3,0,true)}
                  onEndReached={ () => this.loadMore(3)}
                  ListFooterComponent={ 
                    this.state.questionAnswerList.length > 0 &&
                    this.state.isQuestionAll
                      ? this._footer
                      : null
                  }
                  refreshing={ this.state.refreshing}
                  keyExtractor={ this.keyExtractor}
                />
              </View>
              <View tabLabel="视频">
                <FlatList
                  data={ this.state.videoList}
                  renderItem={ this.renderVideoItem.bind(this)}
                  onEndReachedThreshold={ 0.01}
                  onRefresh={ () => this.getFirstThreadList(2,0,true)}
                  onEndReached={ () => this.loadMore(2)}
                  ListFooterComponent={ 
                    this.state.videoList.length > 0 && this.state.isVideoAll
                      ? this._footer
                      : null
                  }
                  refreshing={ this.state.refreshing}
                  keyExtractor={ this.keyExtractor}
                />
              </View>
            </ScrollableTabView>

## 五、注意事项 ##

>  *  `<ScrollableTabView>` 外边必须是弹性盒子，并加上`flex:1`属性。
>  *  `<ScrollableTabView>` 所有父级必须全部是 `flex:1`，不然会出现各种问题，例如无法切换。
>  *  [page属性设置可能引起的bug][page_bug]⚠️。

## 六、拓展阅读 ##

*  《[react-native-scrollable-tab-view npmjs][]》

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmh1YXFpYW5nMQ_size_16_color_FFFFFF_t_70]: /images/20221021/2f612301eee347c38bc362788c3aba05.png
[page_bug]: https://github.com/ptomasroos/react-native-scrollable-tab-view/issues/126
[react-native-scrollable-tab-view npmjs]: https://www.npmjs.com/package/react-native-scrollable-tab-view