背景
最近在做一個(gè)RN項(xiàng)目敞嗡，需要做個(gè)tab的需求歇竟，查看了RN的官方文檔，官方為我們提供的Tab控制器有兩種：
ViewPagerAndroid：該控件只適用于Android平臺(tái)（嚴(yán)格來說講，不算液南，因?yàn)槲覀冞€要自己實(shí)現(xiàn)Tab）踩麦；
TabBarIOS：該控件只適用于IOS平臺(tái)枚赡；
因此，如果我們想要實(shí)現(xiàn)一個(gè)通用的Tab控制器谓谦，就要借助開源的力量贫橙，本篇文章就教你如何使用 react-native-scrollable-tab-view。
準(zhǔn)備工作
1反粥、新建一個(gè)項(xiàng)目
react-native init TabDemo
2卢肃、添加react-native-scrollable-tab-view依賴庫
npm install react-native-scrollable-tab-view --save
Props介紹
renderTabBar(Function:ReactComponent)
TabBar的樣式疲迂，系統(tǒng)為我們提供了兩種默認(rèn)的，分別是DefaultTabBar和ScrollableTabBar莫湘。當(dāng)然尤蒿，我們也可以自定義一個(gè)，我會(huì)在下篇文章重點(diǎn)講解如何去自定義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>
);
}
注意：每個(gè)被包含的子視圖需要使用tabLabel屬性优质，表示對(duì)應(yīng)Tab顯示的文字
DefaultTabBar：Tab會(huì)平分在水平方向的空間
ScrollableTabBar：Tab可以超過屏幕范圍，滾動(dòng)可以顯示军洼。
tabBarPosition(String巩螃，默認(rèn)值'top')
render() {
return (
<ScrollableTabView
tabBarPosition='top'
renderTabBar={() => <DefaultTabBar/>}>
...
</ScrollableTabView>
);
}
top：位于屏幕頂部。
bottom：位于屏幕底部匕争。
overlayTop：位于屏幕頂部避乏，懸浮在內(nèi)容視圖之上（看顏色區(qū)分：視圖有顏色，Tab欄沒有顏色甘桑。
overlayBottom：位于屏幕底部拍皮，懸浮在內(nèi)容視圖之上（看顏色區(qū)分：視圖有顏色，Tab欄沒有顏色）
onChangeTab(Function)
當(dāng)Tab切換時(shí)會(huì)觸發(fā)此方法跑杭，包含一個(gè)參數(shù)（Object類型）铆帽，這個(gè)對(duì)象有兩個(gè)參數(shù)
i：被選中的Tab的下標(biāo)（從0開始）
ref：被選中的Tab對(duì)象（基本用不到）
render() {
return (
<ScrollableTabView
renderTabBar={() => <DefaultTabBar/>}
onChangeTab={(obj) => {
console.log('index:' + obj.i);
}
}>
...
</ScrollableTabView>
);
}
onScroll(Function)
視圖正在滑動(dòng)的時(shí)候觸發(fā)此方法，包含一個(gè)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爹橱，默認(rèn)為false)
表示手指是否能拖動(dòng)或者滑動(dòng)視圖，默認(rèn)為false（表示可以拖動(dòng)）窄做。設(shè)為true的話愧驱，我們只能“點(diǎn)擊”Tab來切換視圖。
render() {
return (
<ScrollableTabView
locked={false}
renderTabBar={() => <DefaultTabBar/>}>
...
</ScrollableTabView>
);
}
initialPage(Integer)
初始化時(shí)被選中的Tab下標(biāo)椭盏，默認(rèn)是0（即第一頁）
render() {
return (
<ScrollableTabView
initialPage={1}
renderTabBar={() => <DefaultTabBar/>}>
...
</ScrollableTabView>
);
}
注意：2016.12.12更新：react-native-scrollable-tab-view最新版本0.7.0组砚，此屬性在Android平臺(tái)無效，具體表現(xiàn)為頁面不會(huì)被“渲染”掏颊，但是iOS平臺(tái)是沒問題的糟红。建議大家暫時(shí)使用0.6.0，作者表示已經(jīng)準(zhǔn)備修復(fù)此問題乌叶，詳見：https://github.com/skv-headless/react-native-scrollable-tab-view/issues/483
page(Integer)設(shè)置選中指定的Tab（然而測(cè)試下來并沒有任何效果改化，知道原因的同學(xué)麻煩留言下 ~）
children*(ReactComponents)
表示所有子視圖的數(shù)組，比如下面的代碼枉昏，children則是一個(gè)長度為6的數(shù)組陈肛，元素類型為Text
render() {
return (<ScrollableTabViewrenderTabBar={() => <DefaultTabBar/>}>
<Text tabLabel='Tab1'/>
<Text tabLabel='Tab2'/>
<Text tabLabel='Tab3'/>
<Text tabLabel='Tab4'/>
<Text tabLabel='Tab5'/>
<Text tabLabel='Tab6'/></ScrollableTabView>);}
tabBarUnderlineStyle*(style)
設(shè)置DefaultTabBar和ScrollableTabBar
Tab選中時(shí)下方橫線的顏色
tabBarBackgroundColor*(String)
設(shè)置整個(gè)Tab這一欄的背景顏色
tabBarActiveTextColor*(String)
設(shè)置選中Tab的文字顏色
tabBarInactiveTextColor*(String)
設(shè)置未選中Tab的文字顏色
tabBarTextStyle*(Object)
設(shè)置Tab文字的樣式，比如字號(hào)兄裂、字體等**上面這5個(gè)樣式示例如下：
render() {
return ( <ScrollableTabView renderTabBar={() => <DefaultTabBar />}
tabBarUnderlineStyle={{backgroundColor:'#FF0000'}}
tabBarBackgroundColor='#FFFFFF'
tabBarActiveTextColor='#9B30FF'
tabBarInactiveTextColor='#7A67EE'
tabBarTextStyle={{fontSize: 18}} > ...
</ScrollableTabView> );}
style(View.propTypes.style)
系統(tǒng)View都擁有的屬性句旱，基本不會(huì)涉及到阳藻。
contentProps*(Object)
這里要稍微說下react-native-scrollable-tab-view的實(shí)現(xiàn)，其實(shí)在Android平臺(tái)底層用的是ViewPagerAndroid谈撒，iOS平臺(tái)用的是ScrollView腥泥。這個(gè)屬性的意義是：比如我們?cè)O(shè)置了某個(gè)屬性，最后這個(gè)屬性會(huì)被應(yīng)用在ScrollView/ViewPagerAndroid啃匿，這樣會(huì)覆蓋庫里面默認(rèn)的蛔外，通常官方不建議我們?nèi)ナ褂谩?/p>
scrollWithoutAnimation*(Bool，默認(rèn)為false)
設(shè)置“點(diǎn)擊”Tab時(shí)溯乒，視圖切換是否有動(dòng)畫夹厌，默認(rèn)為false（即：有動(dòng)畫效果）。
render() {return (<ScrollableTabViewscrollWithoutAnimation={true}renderTabBar={() => <DefaultTabBar/>}>...</ScrollableTabView>);}
注意：這個(gè)屬性的設(shè)置對(duì)滑動(dòng)視圖切換的動(dòng)畫效果沒有影響裆悄，僅僅對(duì)“點(diǎn)擊”Tab效果有作用矛纹。看下下面動(dòng)態(tài)圖的對(duì)比（今天錄得動(dòng)態(tài)圖不知道為啥抽瘋了光稼，調(diào)了好幾遍都不行或南，湊合看吧~）。
基本用法
var ScrollableTabView = require('react-native-scrollable-tab-view');
var App = React.createClass({
render() {
return (
<ScrollableTabView>
<Text tabLabel="One" >這是第一個(gè)頁面</Text>
<Text tabLabel="Two" >這是第二個(gè)頁面</Text>
<Text tabLabel="Three" >這是第三個(gè)頁面</Text>
</ScrollableTabView>
);
}
});
在使用過程中艾君，React和React Native的版本如下：
"react": "16.0.0-alpha.6"
"react-native": "0.43.3",
在使用過程中采够，遇到比較苦逼的坑；
1冰垄、一開始下載的react-native-scrollable-tab-view版本是0.6.6蹬癌。但是就有問題，報(bào)了個(gè)不能讀style屬性的錯(cuò)播演，
Cannot read property 'style' of undefined
然后去Git源碼中查問題冀瓦，原因是react-native-scrollable-tab-view版本>=0.6.6 和react-native >=0.44.0伴奥，主要是 0.44版本后對(duì)viewproptypes的使用限定写烤，解決辦法了，如果你是使用的native版本低于44拾徙，你就得這個(gè)你就得強(qiáng)制使用react-native-scrollable-tab-view的0.7.4版本了洲炊，具體解釋請(qǐng)看issues634。
或者升級(jí)native版本到44以上的尼啡，解決了暂衡。
2、react-native/Libraries/Components/StaticContainer' does not exist in react-native@43崖瞭，坑哇狂巢。。书聚。唧领。藻雌。
Unable to resolve module react-native/Libraries
/Components/StaticContainer from /MYPROJECT
/node_modules/react-native-scrollable-tab-view/SceneComponent.js:
Module does not exist in the module map
解決辦法也是升級(jí)tab-view的版本到0.7.4或者0.7.5版本。
還有一種辦法就是自己把源碼拷貝出來斩个，看源碼胯杭，知道哪里出問題，就改哪塊源碼受啥，偶就是這么干的做个。。滚局。居暖。
好了，感謝大家耐心看到最后核畴，下篇文章會(huì)介紹react-native-scrollable-tab-view如何去自定義一個(gè)TabBar樣式膝但。感興趣的朋友請(qǐng)繼續(xù)閱讀[React Native]react-native-scrollable-tab-view(二)。
