[React Native]react-native-scrollab

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

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

demo.gif

demo-fb.gif

一、準備工作

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 (
  renderTabBar={() => }>
  
  
  
  
  
  
  
  );
  }
  注意：每個被包含的子檢視需要使用tabLabel屬性，表示對應Tab顯示的文字
  DefaultTabBar：Tab會平分在水平方向的空間
  

  

  default.png

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

  

  scrollable.png

  
  

• tabBarPosition(String，預設值'top')
  render() {
  return (
  tabBarPosition='top'
  renderTabBar={() => }>
  ...
  
  );
  }
  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 (
  renderTabBar={() => }
  onChangeTab={(obj) => {
  console.log('index:' + obj.i);
  }
  }>
  ...
  
  );
  }

• onScroll(Function)
  檢視正在滑動的時候觸發此方法，包含一個Float型別的數字，範圍是[0, tab數量-1]
  render() {
  return (
  renderTabBar={() => }
  onScroll={(postion) => {
  // float型別 [0, tab數量-1]
  console.log('scroll position:' + postion);
  }
  }>
  ...
  
  );
  }

• locked(Bool，預設為false)
  表示手指是否能拖動檢視，預設為false（表示可以拖動）。設為true的話，我們只能“點選”Tab來切換檢視。
  render() {
  return (
  locked={false}
  renderTabBar={() => }>
  ...
  
  );
  }

• initialPage(Integer)
  初始化時被選中的Tab下標，預設是0（即第一頁）
  render() {
  return (
  initialPage={1}
  renderTabBar={() => }>
  ...
  
  );
  }

2016.12.12更新：react-native-scrollable-tab-view最新版本0.7.0，此屬性在Android平臺無效，具體表現為頁面不會被“渲染”，但是iOS平臺是沒問題的。建議大家暫時使用0.6.0，作者表示已經準備修復此問題，詳見：

• 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.’參考

• children(ReactComponents)
  表示所有子檢視的陣列，比如下面的程式碼，children則是一個長度為6的陣列，元素型別為Text
  render() {
  return (
  renderTabBar={() => }>
  
  
  
  
  
  
  
  );
  }

• tabBarUnderlineStyle(style)
  設定DefaultTabBar和ScrollableTabBarTab選中時下方橫線的顏色

• tabBarBackgroundColor(String)
  設定整個Tab這一欄的背景顏色

• tabBarActiveTextColor(String)
  設定選中Tab的文字顏色

• tabBarInactiveTextColor(String)
  設定未選中Tab的文字顏色

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

  render() {  return (     }
        tabBarUnderlineStyle={{backgroundColor:'#FF0000'}}
        tabBarBackgroundColor='#FFFFFF'
        tabBarActiveTextColor='#9B30FF'
        tabBarInactiveTextColor='#7A67EE'
        tabBarTextStyle={{fontSize: 18}}
      >
      ...    
    );
  }

  

  top5.png

• style()
  系統View都擁有的屬性，基本不會涉及到。

• contentProps(Object)
  這裡要稍微說下的實現，其實在Android平臺底層用的是ViewPagerAndroid，iOS平臺用的是ScrollView。這個屬性的意義是：比如我們設定了某個屬性，最後這個屬性會被應用在ScrollView/ViewPagerAndroid，這樣會覆蓋庫裡面預設的，通常官方不建議我們去使用。

• scrollWithoutAnimation(Bool，預設為false)
  設定“點選”Tab時，檢視切換是否有動畫，預設為false（即：有動畫效果）。
  render() {
  return (
  scrollWithoutAnimation={true}
  renderTabBar={() => }>
  ...
  
  );
  }
  注意：這個屬性的設定對滑動檢視切換的動畫效果沒有影響，僅僅對“點選”Tab效果有作用。看下下面動態圖的對比（今天錄得動態圖不知道為啥抽瘋了，調了好幾遍都不行，湊合看吧~）
  

  

  click.gif

  
  

  

  slide.gif

  
  

好了，感謝大家耐心看到最後，下篇文章會介紹如何去自定義一個TabBar樣式。感興趣的朋友請繼續閱讀。

作者：zhuhf
連結：