Table of Content
NativeBaseのTabのborderTopの線を消す
NativeBaseでTabsを使用するとTabsの上側の線がスタイルで線幅をゼロにしても消えなかったので、何か方法を探していたら、下記stackoverflowがヒントになりました。
https://stackoverflow.com/questions/51466904/how-to-remove-the-border-of-native-base-tabs
下の様にコードを書きました。
let width = Dimensions.get('window').width; //full width
<Tabs renderTabBar={()=> <ScrollableTab />}>
<Tab heading="A"
tabStyle={{backgroundColor: '#E91E63', width: width/2}}
textStyle={{color: '#fff'}}
activeTabStyle={{backgroundColor: '#E91E63', width: width/2}}>
</Tab>
<Tab heading="B"
tabStyle={{backgroundColor: '#E91E63', width: width/2}}
textStyle={{color: '#fff'}}
activeTabStyle={{backgroundColor: '#E91E63', width: width/2}}>
</Tab>
</Tabs>
ScrollableTabを使用するとTabの幅のデフォルトがうまく合わなかったので、Dimensionsからwidthを取得して、tabStyleで幅を指定しました。
ご参考まで。