背景
最近在做一个RN项目，需要做个tab的需求，查看了RN的官方文档，官方为我们提供的Tab控制器有两种：
ViewPagerAndroid：该控件只适用于Android平台（严格来说讲，不算，因为我们还要自己实现Tab）；
TabBarIOS：该控件只适用于IOS平台；
因此，如果我们想要实现一个通用的Tab控制器，就要借助开源的力量，本篇文章就教你如何使用 react-native-scrollable-tab-view。
准备工作
1、新建一个项目
react-native init TabDemo
2、添加react-native-scrollable-tab-view依赖库
npm install react-native-scrollable-tab-view --save
Props介绍
renderTabBar(Function:ReactComponent)
TabBar的样式，系统为我们提供了两种默认的，分别是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属性，表示对应Tab显示的文字
DefaultTabBar：Tab会平分在水平方向的空间
ScrollableTabBar：Tab可以超过屏幕范围，滚动可以显示。
tabBarPosition(String，默认值'top')
render() {
return (
<ScrollableTabView
tabBarPosition='top'
renderTabBar={() => <DefaultTabBar/>}>
...
</ScrollableTabView>
);
}
top：位于屏幕顶部。
bottom：位于屏幕底部。
overlayTop：位于屏幕顶部，悬浮在内容视图之上（看颜色区分：视图有颜色，Tab栏没有颜色。
overlayBottom：位于屏幕底部，悬浮在内容视图之上（看颜色区分：视图有颜色，Tab栏没有颜色）
onChangeTab(Function)
当Tab切换时会触发此方法，包含一个参数（Object类型），这个对象有两个参数
i：被选中的Tab的下标（从0开始）
ref：被选中的Tab对象（基本用不到）
render() {
return (
<ScrollableTabView
renderTabBar={() => <DefaultTabBar/>}
onChangeTab={(obj) => {
console.log('index:' + obj.i);
}
}>
...
</ScrollableTabView>
);
}
onScroll(Function)
视图正在滑动的时候触发此方法，包含一个Float类型的数字，范围是[0, tab数量-1]
render() {
return (
<ScrollableTabView
renderTabBar={() => <DefaultTabBar/>}
onScroll={(postion) => {
// float类型 [0, tab数量-1]
console.log('scroll position:' + postion);
}
}>
...
</ScrollableTabView>
);
}
locked(Bool，默认为false)
表示手指是否能拖动或者滑动视图，默认为false（表示可以拖动）。设为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平台无效，具体表现为页面不会被“渲染”，但是iOS平台是没问题的。建议大家暂时使用0.6.0，作者表示已经准备修复此问题，详见：https://github.com/skv-headless/react-native-scrollable-tab-view/issues/483
page(Integer)设置选中指定的Tab（然而测试下来并没有任何效果，知道原因的同学麻烦留言下 ~）
children*(ReactComponents)
表示所有子视图的数组，比如下面的代码，children则是一个长度为6的数组，元素类型为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)
设置DefaultTabBar和ScrollableTabBar
Tab选中时下方横线的颜色
tabBarBackgroundColor*(String)
设置整个Tab这一栏的背景颜色
tabBarActiveTextColor*(String)
设置选中Tab的文字颜色
tabBarInactiveTextColor*(String)
设置未选中Tab的文字颜色
tabBarTextStyle*(Object)
设置Tab文字的样式，比如字号、字体等**上面这5个样式示例如下：
render() {
return ( <ScrollableTabView renderTabBar={() => <DefaultTabBar />}
tabBarUnderlineStyle={{backgroundColor:'#FF0000'}}
tabBarBackgroundColor='#FFFFFF'
tabBarActiveTextColor='#9B30FF'
tabBarInactiveTextColor='#7A67EE'
tabBarTextStyle={{fontSize: 18}} > ...
</ScrollableTabView> );}
style(View.propTypes.style)
系统View都拥有的属性，基本不会涉及到。
contentProps*(Object)
这里要稍微说下react-native-scrollable-tab-view的实现，其实在Android平台底层用的是ViewPagerAndroid，iOS平台用的是ScrollView。这个属性的意义是：比如我们设置了某个属性，最后这个属性会被应用在ScrollView/ViewPagerAndroid，这样会覆盖库里面默认的，通常官方不建议我们去使用。
scrollWithoutAnimation*(Bool，默认为false)
设置“点击”Tab时，视图切换是否有动画，默认为false（即：有动画效果）。
render() {return (<ScrollableTabViewscrollWithoutAnimation={true}renderTabBar={() => <DefaultTabBar/>}>...</ScrollableTabView>);}
注意：这个属性的设置对滑动视图切换的动画效果没有影响，仅仅对“点击”Tab效果有作用。看下下面动态图的对比（今天录得动态图不知道为啥抽疯了，调了好几遍都不行，凑合看吧~）。
基本用法
var ScrollableTabView = require('react-native-scrollable-tab-view');
var App = React.createClass({
render() {
return (
<ScrollableTabView>
<Text tabLabel="One" >这是第一个页面</Text>
<Text tabLabel="Two" >这是第二个页面</Text>
<Text tabLabel="Three" >这是第三个页面</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。但是就有问题，报了个不能读style属性的错，
Cannot read property 'style' of undefined
然后去Git源码中查问题，原因是react-native-scrollable-tab-view版本>=0.6.6 和react-native >=0.44.0，主要是 0.44版本后对viewproptypes的使用限定，解决办法了，如果你是使用的native版本低于44，你就得这个你就得强制使用react-native-scrollable-tab-view的0.7.4版本了，具体解释请看issues634。
或者升级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
解决办法也是升级tab-view的版本到0.7.4或者0.7.5版本。
还有一种办法就是自己把源码拷贝出来，看源码，知道哪里出问题，就改哪块源码，偶就是这么干的。。。。
好了，感谢大家耐心看到最后，下篇文章会介绍react-native-scrollable-tab-view如何去自定义一个TabBar样式。感兴趣的朋友请继续阅读[React Native]react-native-scrollable-tab-view(二)。
