超強通用的React Native Tab控制器使用詳解-入門篇

jmserfew 8年前發布 | 92K 次閱讀 ReactNative 移動開發 React Native

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

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

demo.gif

超強通用的React Native Tab控制器使用詳解-入門篇

demo-fb.gif

一、準備工作

新建一個項目
```
 react-native init Demo6
```

添加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>
  );
}

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>
  );
}

tabBarUnderlineColor(String)
設置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

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 (
    <ScrollableTabView
      scrollWithoutAnimation={true}
      renderTabBar={() => <DefaultTabBar/>}>
      ...
    </ScrollableTabView>
  );
}
```
注意：這個屬性的設置對滑動視圖切換的動畫效果沒有影響，僅僅對“點擊”Tab效果有作用。看下下面動態圖的對比（今天錄得動態圖不知道為啥抽瘋了，調了好幾遍都不行，湊合看吧~）

click.gif

slide.gif