全部标签
写点什么
MySQL云计算程序员行业资讯学习算法Python人工智能区块链Linux前端个人成长面试架构师编程企业动态新基建敏捷安全读书笔记高效工作团队管理创业活动专区生涯规划知识管理运维产品经理 查看更多

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

作者：No Silver Bullet
  • 2022 年 1 月 19 日

  • 本文字数：2659 字

    阅读完需：约 9 分钟

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

一、概述

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


  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⚠️。

六、拓展阅读

划线
评论
复制
发布于: 刚刚阅读数: 2

版权声明: 本文为 InfoQ 作者【No Silver Bullet】的原创文章。

原文链接:【http://xie.infoq.cn/article/e304774bccbd489d00c220af3】。文章转载请联系作者。

1月日更ReactNative标签导航
用户头像

No Silver Bullet

关注

No Silver Bullet 2021.07.09 加入

岂曰无衣 与子同袍

评论

发布
暂无评论
Copyright © 2022, Geekbang Technology Ltd. All rights reserved. 极客邦控股（北京）有限公司 | 京 ICP 备 16027448 号 - 5京公网安备京公网安备 11010502039052号
ReactNative进阶（二十四）：react-native-scrollable-tab-view 标签导航器组件详解