ReactNative组件-react-native-scrollable-tab-view

国际惯例，先引用：

import ScrollableTabView, {DefaultTabBar,ScrollableTabBar} from 'react-native-scrollable-tab-view';

DefaultTabBar样式为：蓝色下横杠，蓝色选中文字，黑色默认文字，白色背景，平铺整个宽度：

ScrollableTabBar样式为，蓝色下横杠，蓝色选中文字，黑色默认文字，白色背景，可水平滚动：

demo：

var App = React.createClass({
  render() {
    return (
      <ScrollableTabView renderTabBar={(props) => <DefaultTabBar/>}>
        <Text tabLabel='Page0'/>
        <Text tabLabel='Page1'/>
        <Text tabLabel='Page2'/>
        <Text tabLabel='Page3'/>
        <Text tabLabel='Page4'/>
      </ScrollableTabView>
    );
  }
});

经常使用参数说明：

• renderTabBar (Function:ReactComponent) - 渲染标签栏，能够用默认的DefaultTabBar或ScrollableTabBar，或者用惟一的参数props进行自定义
  • props.goToPage ( Function(Integer) ) - 跳转至某页
  • props.tabs (Array) - 标签数组
  • props.activeTab (Integer) - 当前激活标签
• tabBarPosition (String) - 标签栏位置，默认的为'top'，能够设置成'bottom'
• onChangeTab (Function(Integer)) - 更改标签触发
• onScroll (Function) - 滚动触发
• locked (Bool) - 是否锁定水平滚动，默认值为false
• initialPage (Integer) - 默认选择的标签，但竟然不加载页面，默认值为0 有什么卵用？
• page (Integer) - 非默认时设置并加载指定标签
• children (ReactComponents) - 子标签
• tabBarUnderlineStyle (View.propTypes.style) - 默认标签的下划线样式
• tabBarBackgroundColor (String) - 默认标签的背景颜色
• tabBarActiveTextColor (String) - 默认标签的激活文字颜色
• tabBarInactiveTextColor (String) - 默认标签的默认文字颜色
• tabBarTextStyle (Object) - 默认标签的文字样式
• style (View.propTypes.style) - 总体的View样式
• contentProps (Object) - 在Android底层是ViewPagerAndroid，iOS是ScrollView，提供自定义底层实现
• scrollWithoutAnimation (Bool) - 是否在选择标签时取消动画，默认值为false
• prerenderingSiblingsNumber (Integer) - 预渲染邻近页，默认渲染全部，0则渲染当前页

官方文档：https://github.com/skv-headless/react-native-scrollable-tab-view