我使用ScrollableTabView,默认第一项不会有下面的横线?选择后面的,在选第一个,下面的横线就出来了

来源:5-2 Popular(最热)模块的列表页面实现-1

低调的小火柴

2018-02-23

http://img.mukewang.com/szimg/5a8ff02f0001cbb907561184.jpg

写回答

2回答

龙晓秀

2018-06-02

//img.mukewang.com/szimg/5b1208ad0001eb3610780661.jpg

到github上面查找了下,修改ScrollableTabBar.js的三处地方就可以了,亲测可以使用。

如果你不需要可以滑动的ScrollableTabBar组件,你把renderTabBar={() => <ScrollableTabBar />}这里换成DefaultTabBar这个组件,就不需要修改源码,也不存在第一个下划线不显示的问题。

0
0

CrazyCodeBoy

2018-02-26

检查一下ScrollableTabView使用是否正确,可参考:

<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>


0
1
龙晓秀
老师你好 我也遇到了同样的问题 和你视频设置的一样 也出不来下划线 我用的是RN0.55.版本 android手机 7.1.1
2018-06-02
共1条回复

React Native技术精讲与高质量上线App开发

一个真实的上线项目,一次完整的开发过程,全面掌握React Native技术

1577 学习 · 727 问题

查看课程