rn項(xiàng)目，需要用到選項(xiàng)卡組件，網(wǎng)上搜到react-native-scrollable-tab-view，但他的tab樣式不能滿足我們的UI設(shè)計(jì)，需要重寫tab條。因此就打算參照這個(gè)重寫一個(gè)選項(xiàng)卡組件。

通過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、同時(shí)還支持背景樣式為一張圖片

<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