官方為我們提供的Tab控制器有兩種：
TabBarIOS戒劫，僅適用于IOS平臺
ViewPagerAndroid半夷，僅適用于Android平臺（嚴格來講并不算，因為我們還需要自己實現(xiàn)Tab）
如果我們需要一個更通用的Tab控制器迅细，那么就要借助開源的力量巫橄，本篇文章教你如何使用
react-native-scrollable-tab-view，這是官方Demo的效果
一茵典、準備工作
- 新建一個項目
react-native init Demo6 - 添加react-native-scrollable-tab-view
npm install react-native-scrollable-tab-view --save
二湘换、Props介紹
-
renderTabBar(Function:ReactComponent)
TabBar的樣式，系統(tǒng)提供了兩種默認的统阿，分別是DefaultTabBar和ScrollableTabBar彩倚。當然，我們也可以自定義一個扶平，我們會在下篇文章重點講解如何去自定義TabBar樣式署恍。
render() {
return (
<ScrollableTabView
renderTabBar={() => <DefaultTabBar/>}>
<Text tabLabel='Tab1'/>
<Text tabLabel='Tab2'/>
<Text tabLabel='Tab3'/>
<Text tabLabel='Tab4'/>
<Text tabLabel='Tab5'/>
<Text tabLabel='Tab6'/>
</ScrollableTabView>
);
}
注意：每個被包含的子視圖需要使用tabLabel屬性，表示對應(yīng)Tab顯示的文字
DefaultTabBar：Tab會平分在水平方向的空間
default.png
ScrollableTabBar：Tab可以超過屏幕范圍蜻直，滾動可以顯示
scrollable.png -
tabBarPosition(String，默認值'top')
render() {
return (
<ScrollableTabView
tabBarPosition='top'
renderTabBar={() => <DefaultTabBar/>}>
...
</ScrollableTabView>
);
}
top：位于屏幕頂部
default.png
bottom：位于屏幕底部
bottom.png
overlayTop：位于屏幕頂部袁串，懸浮在內(nèi)容視圖之上（看顏色區(qū)分：視圖有顏色概而，Tab欄沒有顏色）
overlayTop.png
overlayBottom：位于屏幕底部，懸浮在內(nèi)容視圖之上（看顏色區(qū)分：視圖有顏色囱修，Tab欄沒有顏色）
overlayBottom.png onChangeTab(Function)
Tab切換之后會觸發(fā)此方法赎瑰，包含一個參數(shù)（Object類型），這個對象有兩個參數(shù)
i：被選中的Tab的下標（從0開始）
ref：被選中的Tab對象（基本用不到）
render() {
return (
<ScrollableTabView
renderTabBar={() => <DefaultTabBar/>}
onChangeTab={(obj) => {
console.log('index:' + obj.i);
}
}>
...
</ScrollableTabView>
);
}onScroll(Function)
視圖正在滑動的時候觸發(fā)此方法破镰，包含一個Float類型的數(shù)字餐曼，范圍是[0, tab數(shù)量-1]
render() {
return (
<ScrollableTabView
renderTabBar={() => <DefaultTabBar/>}
onScroll={(postion) => {
// float類型 [0, tab數(shù)量-1]
console.log('scroll position:' + postion);
}
}>
...
</ScrollableTabView>
);
}locked(Bool，默認為false)
表示手指是否能拖動視圖鲜漩，默認為false（表示可以拖動）源譬。設(shè)為true的話，我們只能“點擊”Tab來切換視圖孕似。
render() {
return (
<ScrollableTabView
locked={false}
renderTabBar={() => <DefaultTabBar/>}>
...
</ScrollableTabView>
);
}initialPage(Integer)
初始化時被選中的Tab下標踩娘，默認是0（即第一頁）
render() {
return (
<ScrollableTabView
initialPage={1}
renderTabBar={() => <DefaultTabBar/>}>
...
</ScrollableTabView>
);
}
2016.12.12更新：react-native-scrollable-tab-view最新版本0.7.0，此屬性在Android平臺無效喉祭，具體表現(xiàn)為頁面不會被“渲染”养渴，但是iOS平臺是沒問題的雷绢。建議大家暫時使用0.6.0，作者表示已經(jīng)準備修復此問題理卑，詳見：https://github.com/skv-headless/react-native-scrollable-tab-view/issues/483
- page(Integer)
設(shè)置選中指定的Tab（然而測試下來并沒有任何效果翘紊，知道原因的同學麻煩留言下 ~）
寫于2016.06.29：跟作者溝通下來下個版本打算廢棄這個屬性，原話為‘It is a legacy I would like to remove it but someone might use it. Probably in next version I'll remove it.’參考issue#320
children(ReactComponents)
表示所有子視圖的數(shù)組藐唠，比如下面的代碼帆疟，children則是一個長度為6的數(shù)組，元素類型為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)
設(shè)置DefaultTabBar和ScrollableTabBarTab選中時下方橫線的顏色tabBarBackgroundColor(String)
設(shè)置整個Tab這一欄的背景顏色tabBarActiveTextColor(String)
設(shè)置選中Tab的文字顏色tabBarInactiveTextColor(String)
設(shè)置未選中Tab的文字顏色-
tabBarTextStyle(Object)
設(shè)置Tab文字的樣式中捆，比如字號鸯匹、字體等
上面這5個樣式示例如下：render() { return ( <ScrollableTabView renderTabBar={() => <DefaultTabBar />} tabBarUnderlineStyle={{backgroundColor:'#FF0000'}} tabBarBackgroundColor='#FFFFFF' tabBarActiveTextColor='#9B30FF' tabBarInactiveTextColor='#7A67EE' tabBarTextStyle={{fontSize: 18}} > ... </ScrollableTabView> ); }top5.png style(View.propTypes.style)
系統(tǒng)View都擁有的屬性，基本不會涉及到泄伪。contentProps(Object)
這里要稍微說下react-native-scrollable-tab-view的實現(xiàn)殴蓬，其實在Android平臺底層用的是ViewPagerAndroid，iOS平臺用的是ScrollView蟋滴。這個屬性的意義是：比如我們設(shè)置了某個屬性染厅，最后這個屬性會被應(yīng)用在ScrollView/ViewPagerAndroid，這樣會覆蓋庫里面默認的津函，通常官方不建議我們?nèi)ナ褂谩?/p>-
scrollWithoutAnimation(Bool肖粮，默認為false)
設(shè)置“點擊”Tab時，視圖切換是否有動畫尔苦，默認為false（即：有動畫效果）涩馆。
render() {
return (
<ScrollableTabView
scrollWithoutAnimation={true}
renderTabBar={() => <DefaultTabBar/>}>
...
</ScrollableTabView>
);
}
注意：這個屬性的設(shè)置對滑動視圖切換的動畫效果沒有影響，僅僅對“點擊”Tab效果有作用允坚』昴牵看下下面動態(tài)圖的對比（今天錄得動態(tài)圖不知道為啥抽瘋了，調(diào)了好幾遍都不行稠项，湊合看吧~）
click.gif
slide.gif
好了涯雅，感謝大家耐心看到最后，下篇文章會介紹react-native-scrollable-tab-view如何去自定義一個TabBar樣式展运。感興趣的朋友請繼續(xù)閱讀[React Native]react-native-scrollable-tab-view(進階篇)活逆。
