一张跟内容完全关系的图
介绍
一个带有TabBar和可切换页面的控件。
在Android中可以看成是ViewPager和TabLayout的结合。
实际效果的话，就下面这样了。
添加到项目中
npm install react-native-scrollable-tab-view --save
使用
基本用法
用tabLabel指定Tab名称
render() {
return (
<ScrollableTabView>
<Text tabLabel='Tab 1'>Tab 1</Text>
<Text tabLabel='Tab 2'>Tab 2</Text>
<Text tabLabel='Tab 3'>Tab 3</Text>
</ScrollableTabView>
);
}
效果：
（怎么感觉比Android里面简单多了~~）
使用goToPage切换页面
render() {
return (
<ScrollableTabView
ref={(tabView) => {
this.tabView = tabView;
}}>
<Text tabLabel='Tab 1'>Tab 1</Text>
<Text tabLabel='Tab 2'>Tab 2</Text>
<Button tabLabel='Tab 3' onPress={() => this.tabView.goToPage(0)}
title='GO to Tab 1'/>
</ScrollableTabView>
);
}
this.tabView.goToPage(0)：跳转到第0页 （页面：0、1、2...）
Props
-
renderTabBar (Function:ReactComponent)
TabBar的样式，可以使用官方提供的DefaultTabBar(默认)、ScrollableTabBar，也可以自定义。
render() {
return (
<ScrollableTabView
renderTabBar={() => <DefaultTabBar/>}>
<Text tabLabel='Tab 1'>Tab 1</Text>
<Text tabLabel='Tab 2'>Tab 2</Text>
<Text tabLabel='Tab 3'>Tab 3</Text>
</ScrollableTabView>
);
}
DefaultTabBar：自动分配水平方向的空间，空间不够时每个Tab会自动换行。
ScrollableTabBar：可以超过屏幕范围，滚动可以显示。
当然，我们还可以对他的样式进行调整。
render() {
return (
<ScrollableTabView
renderTabBar={() =>
<ScrollableTabBar style={{height: 40, borderWidth: 0, elevation: 2}}
tabStyle={{height: 40}}/>}>
...
</ScrollableTabView>
);
}
borderWidth：设置边框（感觉没什么用）
elevation：层级效果（阴影）
tabStyle：每个小Tab的Style
（修改style-height后，不改变tabStyle-height会导致TabBar内容不居中）
-
tabBarPosition (String)
TabBar的位置。top（default）、bottom、overlayTop（顶部、悬浮在内容视图之上）、overlayBottom（底部、悬浮在内容视图之上）
render() {
return (
<ScrollableTabView
tabBarPosition='top'>
<Text tabLabel='Tab 1'>Tab 1</Text>
<Text tabLabel='Tab 2'>Tab 2</Text>
<Text tabLabel='Tab 3'>Tab 3</Text>
</ScrollableTabView>
);
}
效果的话你一个个去试吧~~
-
onChangeTab (Function)
页面改变监听。回调函数中有一个Object类型的参数，包含两个key：i（当前选中页面的下标）、ref（被选中的Tab对象）
render() {
return (
<ScrollableTabView
onChangeTab={(obj) => {
console.log('current index ： ' + obj.i)
}}>
<Text tabLabel='Tab 1'>Tab 1</Text>
<Text tabLabel='Tab 2'>Tab 2</Text>
<Text tabLabel='Tab 3'>Tab 3</Text>
</ScrollableTabView>
);
}
-
onScroll (Function)
滑动监听。回调函数中有一个float类型的参数，表示滑动的偏移。
如：当前页面和下个页面的中间值
例：
page0->page1 ：0 -> 0.2 -> 0.3 ... 1 ;
page2->page3: 2->2.1->2.2->2.3 ... 3
render() {
return (
<ScrollableTabView
onScroll={(position) => {
console.log('position : ' + position)
}}>
<Text tabLabel='Tab 1'>Tab 1</Text>
<Text tabLabel='Tab 2'>Tab 2</Text>
<Text tabLabel='Tab 3'>Tab 3</Text>
</ScrollableTabView>
);
}
从page0滑动到page1时打印的结果：
page0->page1
-
locked (Bool)
阻止滑动，默认为false。设置成true后，只能通过点击Tab来切换页面。
render() {
return (
<ScrollableTabView
locked={false}>
<Text tabLabel='Tab 1'>Tab 1</Text>
<Text tabLabel='Tab 2'>Tab 2</Text>
<Text tabLabel='Tab 3'>Tab 3</Text>
</ScrollableTabView>
);
}
-
initialPage (Integer)
默认选择的页面，默认为0。
render() {
return (
<ScrollableTabView
initialPage={1}>
<Text tabLabel='Tab 1'>Tab 1</Text>
<Text tabLabel='Tab 2'>Tab 2</Text>
<Text tabLabel='Tab 3'>Tab 3</Text>
</ScrollableTabView>
);
}
-
page (Integer)
我也不知道干嘛用的，官方给了这样的介绍
set selected tab(can be buggy see #126 -
tabBarUnderlineStyle (View.propTypes.style)
TabBar指示器的样式
render() {
return (
<ScrollableTabView
tabBarUnderlineStyle={{backgroundColor:'#000000', height:1}}>
<Text tabLabel='Tab 1'>Tab 1</Text>
<Text tabLabel='Tab 2'>Tab 2</Text>
<Text tabLabel='Tab 3'>Tab 3</Text>
</ScrollableTabView>
);
}
-
tabBarBackgroundColor (String)
TabBar背景色
render() {
return (
<ScrollableTabView
tabBarBackgroundColor='#FFFFFF'>
<Text tabLabel='Tab 1'>Tab 1</Text>
<Text tabLabel='Tab 2'>Tab 2</Text>
<Text tabLabel='Tab 3'>Tab 3</Text>
</ScrollableTabView>
);
}
-
tabBarActiveTextColor (String)
Tab选中时的文字颜色
render() {
return (
<ScrollableTabView
tabBarActiveTextColor='#000000'>
<Text tabLabel='Tab 1'>Tab 1</Text>
<Text tabLabel='Tab 2'>Tab 2</Text>
<Text tabLabel='Tab 3'>Tab 3</Text>
</ScrollableTabView>
);
}
-
tabBarInactiveTextColor (String)
Tab未选中时的文字颜色
render() {
return (
<ScrollableTabView
tabBarInactiveTextColor='#666666'>
<Text tabLabel='Tab 1'>Tab 1</Text>
<Text tabLabel='Tab 2'>Tab 2</Text>
<Text tabLabel='Tab 3'>Tab 3</Text>
</ScrollableTabView>
);
}
-
tabBarTextStyle (Object)
TabBar文字样式
tabBarTextStyle={fontFamily: 'Roboto', fontSize: 15}
怎么用????
-
scrollWithoutAnimation (Bool)
是否不显示指示条的左右移动的动画，默认`false
render() {
return (
<ScrollableTabView
scrollWithoutAnimation={true}>
<Text tabLabel='Tab 1'>Tab 1</Text>
<Text tabLabel='Tab 2'>Tab 2</Text>
<Text tabLabel='Tab 3'>Tab 3</Text>
</ScrollableTabView>
);
}
-
prerenderingSiblingsNumber (Integer)
预渲染当前页面相邻页面数量，默认为0。若设置为1，预渲染当前页左右共两个页面。
（类似android中ViewPager 的setOffscreenPageLimit(int arg0);）
render() {
return (
<ScrollableTabView
prerenderingSiblingsNumber={3}>
<Text tabLabel='Tab 1'>Tab 1</Text>
<Text tabLabel='Tab 2'>Tab 2</Text>
<Text tabLabel='Tab 3'>Tab 3</Text>
</ScrollableTabView>
);
}
在完全显示页面前（滑动的过程中），默认是不渲染View的。只有完全切换到当前页面时，才开始渲染选中的View。
例：第一次page0->page1，当page1未完全显示时。page1还未开始渲染，是个空页面。
参考
react-native-scrollable-tab-view
[React Native]react-native-scrollable-tab-view(入门篇)
以上有错误之处，感谢指出
网友评论