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