react-native实现选项卡

rn项目，需要用到选项卡组件，网上搜到react-native-scrollable-tab-view，但他的tab样式不能满足我们的UI设计，需要重写tab条。因此就打算参照这个重写一个选项卡组件。

通过npm install react-native-vtron-scrollable-tab引入该组件。

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

1、不可滚动tab

<ScrollableTabView
    onChangeTab={(fromIndex, toIndex)=>{
        this.setState({selectedIndex: toIndex});
    }}
    renderTabBar={() => {
        return (
            <DefaultTabBar
                containerStyle={{borderBottomWidth: onePixel, borderBottomColor: '#EEEEEE'}}
                tabContainerStyle={{height: FIT(44), justifyContent: 'space-around'}}
                activeTabStyle={{paddingHorizontal: FIT(15)}}
                activeTabTitleStyle={{fontSize: FIT(14), color: '#FF6C03'}}
                inactiveTabStyle={{paddingHorizontal: FIT(15)}}
                inactiveTabTitleStyle={{fontSize: FIT(14), color: '#666666'}}
                tabBgStyle={{height: 0}}
            />
        )
    }}
    >
    <View tab={{title: 'tabOne'}} />
    <View tab={{title: 'tabTwo'}} />
    <View tab={{title: 'tabThree'}} />
</ScrollableTabView>

样式

Simulator Screen Shot - iPhone 6 Plus - 2019-07-22 at 17.00.18.png

2、可滚动tab

<ScrollableTabView
    renderTabBar={() => {
        return (
            <ScrollableTabBar
                containerStyle={{borderBottomWidth: onePixel, borderBottomColor: '#EEEEEE'}}
                tabContainerStyle={{height: FIT(44)}}
                activeTabStyle={{paddingHorizontal: FIT(15)}}
                activeTabTitleStyle={{fontSize: FIT(15), color: '#1E1E1E', fontWeight: '500'}}
                inactiveTabStyle={{paddingHorizontal: FIT(15)}}
                inactiveTabTitleStyle={{fontSize: FIT(13), color: '#757575'}}
                tabBgContainerStyle={{paddingHorizontal: FIT(15), bottom: FIT(12)}}
                tabBgStyle={{backgroundColor: '#FFA000', height: FIT(3), borderRadius: FIT(2)}}
            />
        )
    }}
    initialPage={this.gardenManagementState.initialPage}
>
    <View tab={{title: 'tabOne'}}/>
    <View tab={{title: 'tabTwo'}}/>
    <View tab={{title: 'tabThree'}}/>
    <View tab={{title: 'tabFour'}}/>
    <View tab={{title: 'tabOne'}}/>
    <View tab={{title: 'tabOne'}}/>
    <View tab={{title: 'tabOne'}}/>
    <View tab={{title: 'tabOne'}}/>
    <View tab={{title: 'tabOne'}}/>
    <View tab={{title: 'tabOne'}}/>
    <View tab={{title: 'tabOne'}}/>
    <View tab={{title: 'tabOne'}}/>

</ScrollableTabView>

样式

Simulator Screen Shot - iPhone 6 Plus - 2019-07-22 at 17.05.40.png

3、同时还支持背景样式为一张图片

<ScrollableTabView
    ref={ref => this.scrollableTabView = ref}
    renderTabBar={() => {
        return (
            <DefaultTabBar
                tabBgType={TabBarBgType.Image}
                containerStyle={{backgroundColor: 'transparent'}}
                tabContainerStyle={{width: width, height: 38}}
                activeTabStyle={{width: width/7, marginBottom: 5}}
                activeTabTitleStyle={{fontSize: 15, lineHeight: 18, color: '#000000', fontWeight: 'bold'}}
                inactiveTabStyle={{width: width/7, marginBottom: 5}}
                inactiveTabTitleStyle={{fontSize: 13, lineHeight: 18, color: '#000000'}}
                tabBgContainerStyle={{paddingHorizontal:(width/7-30)/2}}
                tabBgStyle={{height: 0}}
                tabBgImageStyle={{width: 30, height: 38}}
                tabBgImageSource={require('../../img/schedule/weekBg.png')}
                badgeImageStyle={{top: -2.5, right: -5, width: 5, height: 5}}
                badgeImageSource={require('../../img/schedule/badge.png')}
            />
        )
    }}
    page={this.state.page}
    initialPage={this.initialPage}
    onChangeTab={this.changeTab}
>
    {this.state.week.map((item, index) => {
        const {title, date, showBadge} = item;
        const tab = {title: title, type: showBadge ? TabBarType.TextWithBadge : TabBarType.Text};
        return <SchedulePage date={date} tab={tab} key={index} updateWeekBadgeValue={this.updateWeekBadgeValue} />
    })}
</ScrollableTabView>

样式

Simulator Screen Shot - iPhone 6 Plus - 2019-07-22 at 17.09.20.png