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

{
        this.setState({selectedIndex: toIndex});
    }}
    renderTabBar={() => {
        return (
            
        )
    }}
    >
    
    
    

样式

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

2、可滚动tab

 {
        return (
            
        )
    }}
    initialPage={this.gardenManagementState.initialPage}
>
    
    
    
    
    
    
    
    
    
    
    
    

样式

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

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

 this.scrollableTabView = ref}
    renderTabBar={() => {
        return (
            
        )
    }}
    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 
    })}

样式

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