组件地址:https://github.com/skv-headless/react-native-scrollable-tab-view
1:属性及方法介绍
1, renderTabBar(Function:ReactComponent)
TabBar的样式,系统提供了两种默认的,分别是DefaultTabBar和ScrollableTabBar。当然,我们也可以自定义一个,我们会在下篇文章重点讲解如何去自定义TabBar样式。
注意:每个被包含的子视图需要使用tabLabel属性,表示对应Tab显示的文字。
DefaultTabBar:Tab会平分在水平方向的空间。
ScrollableTabBar:Tab可以超过屏幕范围,滚动可以显示。
render() {
return (
<ScrollableTabView
renderTabBar={() => <DefaultTabBar/>}>
<Text tabLabel='Tab1'/>
<Text tabLabel='Tab2'/>
<Text tabLabel='Tab3'/>
<Text tabLabel='Tab4'/>
<Text tabLabel='Tab5'/>
<Text tabLabel='Tab6'/>
</ScrollableTabView>
);
}
2,tabBarPosition(String,默认值’top’)
top:位于屏幕顶部
bottom:位于屏幕底部
overlayTop:位于屏幕顶部,悬浮在内容视图之上(看颜色区分:视图有颜色,Tab栏没有颜色)
overlayBottom:位于屏幕底部,悬浮在内容视图之上(看颜色区分:视图有颜色,Tab栏没有颜色)
render() {
return (
<ScrollableTabView
tabBarPosition='top'
renderTabBar={() => <DefaultTabBar/>}>
...
</ScrollableTabView>
);
}
3, onChangeTab(Function)
Tab切换之后会触发此方法,包含一个参数(Object类型),这个对象有两个参数:
i:被选中的Tab的下标(从0开始)
ref:被选中的Tab对象(基本用不到)
render() {
return (
<ScrollableTabView
renderTabBar={() => <DefaultTabBar/>}
onChangeTab={(obj) => {
console.log('index:' + obj.i);
}
}>
...
</ScrollableTabView>
);
}
4,onScroll(Function)
视图正在滑动的时候触发此方法,包含一个Float类型的数字,范围是[0, tab的数量-1]
render() {
return (
<ScrollableTabView
renderTabBar={() => <DefaultTabBar/>}
onScroll={(postion) => {
// float类型 [0, tab数量-1]
console.log('scroll position:' + postion);
}
}>
...
</ScrollableTabView>
);
}
5, locked(Bool,默认为false)
表示手指是否能拖动视图,默认为false(表示可以拖动)。设为true的话,我们只能“点击”Tab来切换视图。
render() {
return (
<ScrollableTabView
locked={false}
renderTabBar={() => <DefaultTabBar/>}>
...
</ScrollableTabView>
);
}
6, initialPage(Integer)
初始化时被选中的Tab下标,默认是0(即第一页)。
render() {
return (
<ScrollableTabView
initialPage={1}
renderTabBar={() => <DefaultTabBar/>}>
...
</ScrollableTabView>
);
}
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(即:有动画效果)。
render() {
return (
<ScrollableTabView
scrollWithoutAnimation={true}
renderTabBar={() => <DefaultTabBar/>}>
...
</ScrollableTabView>
);
}
2:栗子
import React, { Component } from 'react'; import { Text, } from 'react-native'; import ScrollableTabView, { ScrollableTabBar, } from 'react-native-scrollable-tab-view'; type Props = {}; export default class Page1 extends Component<Props> { render( ) {//渲染函数 return ( <ScrollableTabView initialPage={0} renderTabBar={() => <ScrollableTabBar />} > <Text tabLabel='JAVA'>1</Text> <Text tabLabel='IOS'>2</Text> <Text tabLabel='Android'>3</Text> <Text tabLabel='React-Native'>4</Text> </ScrollableTabView> ); } }