react-native-scrollable-tab-view

加載庫

npm install react-native-scrollable-tab-view --save
import ScrollableTabView from 'react-native-scrollable-tab-view';

屬性

• renderTabBar(Function:ReactComponent): TabBar的樣式，可以使用官方提供的DefaultTabBar(默認(rèn))、ScrollableTabBar、也可以自定義。

render() {
    return (
        <ScrollableTabView
            renderTabBar={() => <DefaultTabBar/>}>
            <Text tabLabel='Tab 1'>Tab 1</Text>
            <Text tabLabel='Tab 2'>Tab 2</Text>
            <Text tabLabel='Tab 3'>Tab 3</Text>
        </ScrollableTabView>
    );
}

DefaultTabBar: 自動分配水平方向的空間，空間不夠時每個Tab會自動換行
ScrollableTabBar：可以超過屏幕范圍，滾動可以顯示

• tabBarPosition(String)
  TabBar的位置。top(默認(rèn))、bottom、overlayTop(頂部，懸浮在內(nèi)容視圖之上)、overlayBottom(底部，懸浮在內(nèi)容視圖之上)

• onChangeTab(Function)
  頁面改變監(jiān)聽?；卣{(diào)函數(shù)中有一個Object類型的參數(shù)，包含兩個key：i(當(dāng)前選中頁面的下標(biāo))，ref(被選中的Tab對象)。

• onScroll(Function)
  滑動監(jiān)聽?；卣{(diào)函數(shù)中有一個Float類型的參數(shù)，表示滑動的偏移。

• locked(Bool)
  阻止滑動，默認(rèn)為false。設(shè)置成true后，只能通過點擊Tab來切換頁面

• initialPage (Integer)
  默認(rèn)選擇的頁面，默認(rèn)為0

• page (Integer)
  它實際上是currentPage，因為它對變化作出反應(yīng)

• tabBarUnderlineStyle
  默認(rèn)標(biāo)簽欄的下劃線樣式

• tabBarBackgroundColor(String)
  默認(rèn)標(biāo)簽欄背景的顏色，默認(rèn)為白色

• tabBarActiveTextColor(String)
  被選中狀態(tài)下，標(biāo)簽欄文本的顏色

• tabBarInactiveTextColor(String)
  非選中狀態(tài)下，標(biāo)簽欄文本的顏色

• tabBarTextStyle(Object)
  標(biāo)簽欄文本的其他樣式

• scrollWithoutAnimation(Bool)
  在選項卡按下更改選項卡沒有動畫

自定義TabBar

export default class HomeTabBar extends Component {

    static propTypes = {
        goToPage: PropTypes.func, // 跳轉(zhuǎn)到對應(yīng)tab的方法
        activeTab: PropTypes.number, // 當(dāng)前被選中的tab的下標(biāo)
        tabNames: PropTypes.array, // 保存tab名稱
        tabIconNames: PropTypes.array // 保存tab圖標(biāo)
    };

    render() {
        return (
            <View style={styles.tabs}>
                {/* 遍歷，系統(tǒng)會提供一個tab和下標(biāo)，調(diào)用一個自定義的方法 */}
                {this.props.tabNames.map((tab, i) => this.renderTabOption(tab, i))}
            </View>
        );
    };

    renderTabOption = (tab, i) => {
        // 判斷i是否是當(dāng)前選中的tab，設(shè)置不同的顏色
        let color = this.props.activeTab === i ? mainColor : C2;
        return (
            <TouchableOpacity
                style={styles.tab}
                activeOpacity={0.7}
                onPress={() => this.props.goToPage(i)}
                key={tab === undefined ? 'tab' : tab.toString()}>

                <View style={styles.tabItem}>
                    <Icon
                        name={this.props.tabIconNames[i]}
                        size={27}
                        color={color}/>
                    <Text style={{color: color, fontSize: 12, marginTop: 1}}>
                        {this.props.tabNames[i]}
                    </Text>
                </View>

            </TouchableOpacity>
        );
    };

}