react-native-scrollable-tab-view是一個(gè)滑動tab組件，可在tab之間進(jìn)行切換顯示內(nèi)容
https://github.com/skv-headless/react-native-scrollable-tab-view

1、安裝依賴

npm install --save react-native-scrollable-tab-view

2、引入組件

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

3、組件使用
系統(tǒng)給我們提供了以下默認(rèn)兩種樣式 ，當(dāng)然我們也可以自定義
ScrollableTabBar ：Tab可以超過屏幕范圍，滾動可以顯示
DefaultTabBar : Tab會平分在水平方向的空間

a.使用DefaultTabBar 樣式，Tab平分在水平方向的空間

render() {
    return (
<ScrollableTabView
    renderTabBar={() => <DefaultTabBar/>}>
    <Text tabLabel='Tab1'/>
    <Text tabLabel='Tab2'/>
    <Text tabLabel='Tab3'/>
    <Text tabLabel='Tab4'/>
    <Text tabLabel='Tab5'/>
    <Text tabLabel='Tab6'/>
</ScrollableTabView>
);
}

效果如下：

Paste_Image.png

b.使用ScrollableTabBar 樣式，Tab超過屏幕范圍，滾動顯示

render() {
    return (
<ScrollableTabView
    style={styles.container}
    tabBarPosition='top'//tabBarPosition默認(rèn)top  位于屏幕頂部   bottom位于屏幕底部  overlayTop懸浮在頂部
    initialPage={0} //初始化時(shí)被選中的Tab下標(biāo)，默認(rèn)是0
    locked={false}//表示手指是否能拖動視圖  默認(rèn)false  true則不能拖動,只可點(diǎn)擊
    renderTabBar={() => <ScrollableTabBar />}
    tabBarUnderlineStyle={{backgroundColor: '#FF0000'}}//設(shè)置DefaultTabBar和ScrollableTabBarTab選中時(shí)下方橫線的顏色
    tabBarBackgroundColor='#FFFFFF'//設(shè)置整個(gè)Tab這一欄的背景顏色
    tabBarActiveTextColor='#9B30FF'//設(shè)置選中Tab的文字顏色
    tabBarInactiveTextColor='#7A67EE'//設(shè)置未選中Tab的文字顏色
    tabBarTextStyle={{fontSize: 18}}//設(shè)置Tab文字的樣式
    onChangeTab={(obj) => {//Tab切換之后會觸發(fā)此方法
      console.log('index:' + obj.i);
    }}
    onScroll={(postion) => {  //視圖正在滑動的時(shí)候觸發(fā)此方法
      // float類型 [0, tab數(shù)量-1]
      console.log('scroll position:' + postion);
    }}
>
    <View tabLabel='Tab1'>
        <Text>Tab1</Text>
    </View>
    <View tabLabel='Tab2'>
        <Text>Tab2</Text>
    </View>
    <View tabLabel='Tab3'>
        <Text>Tab3</Text>
    </View>
    <View tabLabel='Tab4'>
        <Text>Tab4</Text>
    </View>
    <View tabLabel='Tab5'>
        <Text>Tab5</Text>
    </View>
    <View tabLabel='Tab6'>
        <Text>Tab6</Text>
    </View>
</ScrollableTabView>
);
}

效果如下：

Paste_Image.png

這里有個(gè)問題，在使用ScrollableTabBar 樣式的時(shí)候，假如我們設(shè)置了tabBarUnderlineStyle選中狀態(tài)下劃線顏色，默認(rèn)選中第一個(gè)tab沒有選中下劃線樣式，在點(diǎn)擊tab的時(shí)候才會出現(xiàn)下劃線樣式，而使用DefaultTabBar樣式時(shí)沒有這種問題，不知道是什么原因，有知道原因的還請告知一下，謝謝。

Paste_Image.png

參考資料：

• [React Native]react-native-scrollable-tab-view(入門篇)
  http://www.itdecent.cn/p/b7788c3d106e
• [React Native]react-native-scrollable-tab-view(進(jìn)階篇)
  http://www.itdecent.cn/p/b0cfe7f11ee7
• React Native之react-native-scrollable-tab-view詳解
  http://blog.csdn.net/xiangzhihong8/article/details/72730951?ref=myread

作者：fozero
聲明：原創(chuàng)文章，轉(zhuǎn)載請注意出處！http://www.itdecent.cn/p/a729fa3c4754
標(biāo)簽：ReactNative