http://www.jianshu.com/p/b7788c3d106e

官方為我們提供的Tab控制器有兩種：
TabBarIOS，僅適用於IOS平臺
ViewPagerAndroid，僅適用於Android平臺（嚴格來講並不算，因為我們還需要自己實現Tab）

如果我們需要一個更通用的Tab控制器，那麼就要藉助開源的力量，本篇文章教你如何使用
react-native-scrollable-tab-view，這是官方Demo的效果

一、準備工作

1. 新建一個專案

    react-native init Demo6

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會平分在水平方向的空間
  

  
  default.png

  
  ScrollableTabBar：Tab可以超過螢幕範圍，滾動可以顯示
  

  
  scrollable.png

• tabBarPosition(String，預設值'top')

  render() {
    return (
      <ScrollableTabView
        tabBarPosition='top'
        renderTabBar={() => <DefaultTabBar/>}>
        ...
      </ScrollableTabView>
    );
  }

  top：位於螢幕頂部
  

  
  default.png

  
  bottom：位於螢幕底部
  

  
  bottom.png

  
  overlayTop：位於螢幕頂部，懸浮在內容檢視之上（看顏色區分：檢視有顏色，Tab欄沒有顏色）
  

  
  overlayTop.png

  
  overlayBottom：位於螢幕底部，懸浮在內容檢視之上（看顏色區分：檢視有顏色，Tab欄沒有顏色）
  

  
  overlayBottom.png

• 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（然而測試下來並沒有任何效果，知道原因的同學麻煩留言下 ~）

  寫於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)
  表示所有子檢視的陣列，比如下面的程式碼，children則是一個長度為6的陣列，元素型別為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)
  設定DefaultTabBar和ScrollableTabBarTab選中時下方橫線的顏色
• tabBarBackgroundColor(String)
  設定整個Tab這一欄的背景顏色
• tabBarActiveTextColor(String)
  設定選中Tab的文字顏色
• tabBarInactiveTextColor(String)
  設定未選中Tab的文字顏色

• tabBarTextStyle(Object)
  設定Tab文字的樣式，比如字號、字型等
  上面這5個樣式示例如下：

  render() {
    return (
      <ScrollableTabView
        renderTabBar={() => <DefaultTabBar />}
        tabBarUnderlineColor='#FF0000'
        tabBarBackgroundColor='#FFFFFF'
        tabBarActiveTextColor='#9B30FF'
        tabBarInactiveTextColor='#7A67EE'
        tabBarTextStyle={{fontSize: 18}}
      >
      ...
      </ScrollableTabView>
    );
  }

  
  top5.png
• contentProps(Object)
  這裡要稍微說下react-native-scrollable-tab-view的實現，其實在Android平臺底層用的是ViewPagerAndroid，iOS平臺用的是ScrollView。這個屬性的意義是：比如我們設定了某個屬性，最後這個屬性會被應用在ScrollView/ViewPagerAndroid，這樣會覆蓋庫裡面預設的，通常官方不建議我們去使用。
• scrollWithoutAnimation(Bool，預設為false)
  設定“點選”Tab時，檢視切換是否有動畫，預設為false（即：有動畫效果）。

  render() {
    return (
      <ScrollableTabView
        scrollWithoutAnimation={true}
        renderTabBar={() => <DefaultTabBar/>}>
        ...
      </ScrollableTabView>
    );
  }

  注意：這個屬性的設定對滑動檢視切換的動畫效果沒有影響，僅僅對“點選”Tab效果有作用。看下下面動態圖的對比（今天錄得動態圖不知道為啥抽瘋了，調了好幾遍都不行，湊合看吧~）
  
  click.gif
  
  slide.gif