Question

我正在使用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

还有其他办法吗？

谢谢。

Answer 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行）所做的更改应用到您自己的默认组件

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

1 个答案: