ReactNative进阶(二十四):react-native-scrollable-tab-view标签导航器组件详解
Posted No Silver Bullet
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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、使用插件
三、属性及方法介绍
renderTabBar(Function:ReactComponent)
TabBar
的样式,系统提供了两种默认的,分别是DefaultTabBar
和ScrollableTabBar
。
注意:每个被包含的子视图需要使用tabLabel
属性,表示对应Tab
显示的文字。
DefaultTabBar
:Tab会平分在水平方向的空间。ScrollableTabBar
:Tab可以超过屏幕范围,滚动可以显示。
tabBarPosition(String,默认值’top’)
top
:位于屏幕顶部;bottom
:位于屏幕底部;overlayTop
:位于屏幕顶部,悬浮在内容视图之上(看颜色区分:视图有颜色,Tab栏没有颜色);overlayBottom
:位于屏幕底部,悬浮在内容视图之上(看颜色区分:视图有颜色,Tab栏没有颜色);
onChangeTab(Function)
Tab切换之后会触发此方法,包含一个参数(Object
类型),这个对象有两个参数:
- i:被选中的Tab的下标(从0开始)
- ref:被选中的Tab对象(基本用不到)
-
onScroll(Function)
视图正在滑动的时候触发此方法,包含一个Float类型的数字,范围是[0, tab的数量-1]
-
locked(Bool,默认为false)
表示手指是否能拖动视图,默认为false
(表示可以拖动)。设为true
的话,我们只能“点击”Tab来切换视图。 -
initialPage(Integer)
初始化时被选中的Tab下标,默认是0(即第一页)。 -
page(Integer)
设置选中指定的Tab。 -
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>
);
}
tabBarUnderlineStyle(style)
设置DefaultTabBar
和ScrollableTabBarTab
选中时下方横线的颜 色。tabBarBackgroundColor(String)
设置整个Tab这一栏的背景颜色tabBarActiveTextColor(String)
设置选中Tab的文字颜色。tabBarInactiveTextColor(String)
设置未选中Tab的文字颜色。contentProps(Object)
这里要稍微说下react-native-scrollable-tab-view
的实现,其实在android
平台底层用的是ViewPagerAndroid
,ios
平台用的是ScrollView
。这个属性的意义是:比如我们设置了某个属性,最后这个属性会被应用在ScrollView/ViewPagerAndroid
,这样会覆盖库里面默认的,通常官方不建议我们去使用。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
,不然会出现各种问题,例如无法切换。
以上是关于ReactNative进阶(二十四):react-native-scrollable-tab-view标签导航器组件详解的主要内容,如果未能解决你的问题,请参考以下文章
ReactNative进阶(二十六):子组件调用父组件中的函数
大数据ClickHouse进阶(二十四):ClickHouse权限管理
ReactNative进阶(二十七):createMaterialTopTabNavigator顶部导航组件