React Native Scrollable Tab视图:活动选项卡backgroundColor

时间:2017-12-13 02:59:40

标签: react-native

我正在使用react-native-scrollable-tab-view(https://github.com/skv-headless/react-native-scrollable-tab-view)。

是否可以为活动标签设置backgroundColor?

我试过像这样设置下划线height = tab height:

  <ScrollableTabView
    initialPage={0}
    renderTabBar={() => <DefaultTabBar />}
    tabBarUnderlineStyle={{
      backgroundColor: 'white',
      height: 50,
    }}
  >

但下划线涵盖标签文字: screen shot

还有其他办法吗?

谢谢。

1 个答案:

答案 0 :(得分:1)

我会避免以您所描述的方式修改标签栏,即使您使用透明背景颜色,活动标签颜色仍会覆盖文本。

而是直接修改<DefaultTabBar />组件。

我通过从源复制<DefaultTabBar />组件并修改它以接受名为activeBackgroundColor的新参数,为您创建了一个新的默认标签栏组件。

this复制并粘贴到名为DefaultTabBar.js

的文件中

包含此组件并按如下方式调用:

import ScrollableTabView from 'react-native-scrollable-tab-view';
import DefaultTabBar from './DirYouPlacedThisIn/DefaultTabBar.js';

...

render() {
    return (
       <ScrollableTabView
          renderTabBar={() => <DefaultTabBarz activeBackgroundColor="#f1c40f" />}
       >
        ...
      </ScrollableTabView>
    );
  }

故障排除:我使用的是react-native-scrollable-tab-view@0.7.4。如果我提供的组件产生错误,您可能必须引用<DefaulTabBar />文件夹中的node_modules/react-native-scrollable-tab-view组件。将我从自定义组件(第23,41,51行)所做的更改应用到您自己的默认组件