ReactNative react-native-scrollable-tab-view 标签导航器组件详解

举报
SHQ5785 发表于 2023/04/14 09:22:48 2023/04/14
【摘要】 一、概述react-native-scrollable-tab-view 标签导航组件可实现点击切换,每个 tab 可以有自己的 ScrollView,点击切换的时候可以维护自己的滚动方向。 二、使用react-native-scrollable-tab-view插件1、通过npm将插件加入项目npm install --save react-native-scrollable-tab-v...

一、概述

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的样式,系统提供了两种默认的,分别是DefaultTabBarScrollableTabBar
注意:每个被包含的子视图需要使用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)
    设置DefaultTabBarScrollableTabBarTab选中时下方横线的颜 色。
  2. tabBarBackgroundColor(String)
    设置整个Tab这一栏的背景颜色
  3. tabBarActiveTextColor(String)
    设置选中Tab的文字颜色。
  4. tabBarInactiveTextColor(String)
    设置未选中Tab的文字颜色。
  5. contentProps(Object)
    这里要稍微说下react-native-scrollable-tab-view的实现,其实在Android平台底层用的是ViewPagerAndroidiOS平台用的是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⚠️。

六、拓展阅读

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。