一張跟內(nèi)容完全關(guān)系的圖
介紹
一個(gè)帶有TabBar和可切換頁(yè)面的控件温艇。
在Android中可以看成是ViewPager和TabLayout的結(jié)合。
實(shí)際效果的話(huà)，就下面這樣了刽辙。
官方的動(dòng)圖
你可以選擇直接上官方Github了解怎么使用，或者繼續(xù)往下看我裝逼甲献。
添加到項(xiàng)目中
npm install react-native-scrollable-tab-view --save
使用
基本用法
用tabLabel指定Tab名稱(chēng)
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>
);
}
效果：
（怎么感覺(jué)比Android里面簡(jiǎn)單多了~~）
使用goToPage切換頁(yè)面
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)：跳轉(zhuǎn)到第0頁(yè) （頁(yè)面：0宰缤、1、2...）
Props
-
renderTabBar (Function:ReactComponent)
TabBar的樣式晃洒，可以使用官方提供的DefaultTabBar(默認(rèn))撵溃、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：自動(dòng)分配水平方向的空間缘挑，空間不夠時(shí)每個(gè)Tab會(huì)自動(dòng)換行。
ScrollableTabBar：可以超過(guò)屏幕范圍桶略，滾動(dòng)可以顯示语淘。
當(dāng)然，我們還可以對(duì)他的樣式進(jìn)行調(diào)整际歼。
render() {
return (
<ScrollableTabView
renderTabBar={() =>
<ScrollableTabBar style={{height: 40, borderWidth: 0, elevation: 2}}
tabStyle={{height: 40}}/>}>
...
</ScrollableTabView>
);
}
borderWidth：設(shè)置邊框（感覺(jué)沒(méi)什么用）
elevation：層級(jí)效果（陰影）
tabStyle：每個(gè)小Tab的Style
（修改style-height后惶翻，不改變tabStyle-height會(huì)導(dǎo)致TabBar內(nèi)容不居中）
-
tabBarPosition (String)
TabBar的位置。top（default）鹅心、bottom吕粗、overlayTop（頂部、懸浮在內(nèi)容視圖之上）旭愧、overlayBottom（底部颅筋、懸浮在內(nèi)容視圖之上）
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>
);
}
效果的話(huà)你一個(gè)個(gè)去試吧~~
-
onChangeTab (Function)
頁(yè)面改變監(jiān)聽(tīng)∈淇荩回調(diào)函數(shù)中有一個(gè)Object類(lèi)型的參數(shù)议泵，包含兩個(gè)key：i（當(dāng)前選中頁(yè)面的下標(biāo)）、ref（被選中的Tab對(duì)象）
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)
滑動(dòng)監(jiān)聽(tīng)桃熄∠瓤冢回調(diào)函數(shù)中有一個(gè)float類(lèi)型的參數(shù)，表示滑動(dòng)的偏移瞳收。
如：當(dāng)前頁(yè)面和下個(gè)頁(yè)面的中間值
例：
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滑動(dòng)到page1時(shí)打印的結(jié)果：
page0->page1
-
locked (Bool)
阻止滑動(dòng)碉京，默認(rèn)為false。設(shè)置成true后螟深，只能通過(guò)點(diǎn)擊Tab來(lái)切換頁(yè)面谐宙。
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)
默認(rèn)選擇的頁(yè)面，默認(rèn)為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 #126tabBarUnderlineStyle (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選中時(shí)的文字顏色
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未選中時(shí)的文字顏色
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)
是否不顯示指示條的左右移動(dòng)的動(dòng)畫(huà)厘灼，默認(rèn)`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)
預(yù)渲染當(dāng)前頁(yè)面相鄰頁(yè)面數(shù)量，默認(rèn)為0咽瓷。若設(shè)置為1设凹，預(yù)渲染當(dāng)前頁(yè)左右共兩個(gè)頁(yè)面茅姜。
（類(lèi)似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>
);
}
在完全顯示頁(yè)面前（滑動(dòng)的過(guò)程中）闪朱，默認(rèn)是不渲染View的。只有完全切換到當(dāng)前頁(yè)面時(shí)钻洒，才開(kāi)始渲染選中的View奋姿。
例：第一次page0->page1，當(dāng)page1未完全顯示時(shí)素标。page1還未開(kāi)始渲染称诗，是個(gè)空頁(yè)面。
參考
react-native-scrollable-tab-view
[React Native]react-native-scrollable-tab-view(入門(mén)篇)
以上有錯(cuò)誤之處头遭，感謝指出
