react-native-scrollable-tab-view只能在一行显示吗？

来源：5-4 Popular(最热)模块的列表页面实现-3

三生三途

2018-08-15

这样的需求怎么实现呢。。

写回答

2回答

CrazyCodeBoy

2018-08-16

已采纳

默认react-native-scrollable-tab-view是不支持的，不过你可以通过重写ScrollableTabBar来实现，ScrollableTabView的renderTabBar是来设置顶部的Tab的默认它是占满整行的，如果要在右侧加入搜索按钮可以重写ScrollableTabBar在它里面加入搜索按钮:

<ScrollableTabView
    tabBarUnderlineStyle={{backgroundColor: '#e7e7e7', height: 2}}
    tabBarInactiveTextColor='mintcream'
    tabBarActiveTextColor='white'
    ref="scrollableTabView"
    tabBarBackgroundColor={this.state.theme.themeColor}
    initialPage={0}
    renderTabBar={() => <ScrollableTabBar style={{height: 40, borderWidth: 0, elevation: 2}}
                                          tabStyle={{height: 39}}/>}
>
    {this.state.languages.map((reuslt, i, arr) => {
        let language = arr[i];
        return language.checked ? <PopularTab key={i} tabLabel={language.name} {...this.props}/> : null;
    })}
</ScrollableTabView>