首页 文章

在第2和第3个可滚动标签之间出现了边框，它们一定不在那里

提问于
浏览 次
0

我正在使用react-native可滚动选项卡和native-base . 在第2和第3个可滚动标签之间出现了边框，它们一定不在那里 . 我试图在样式对象中添加borderLeftWidth：0，marginLeft：0，但它没有解决问题 . Here is the image

这是代码 .

return (
      <Container style={{backgroundColor: '#494949'}}>
        <CommonHeader {...this.props} />
          <Tabs tabBarUnderlineStyle={{ backgroundColor: '#42d4f4' }}>
            <Tab tabStyle={{backgroundColor: '#EEE'}}
                 heading="Popular"
                 activeTextStyle={{ color: '#42d4f4' }}
                 activeTabStyle={{backgroundColor: '#EEE'}}
                 textStyle={{ color: 'grey' }}>
              <Articles {...this.props} />
            </Tab>
            <Tab tabStyle={{backgroundColor: '#EEE'}}
                 heading="New"
                 activeTextStyle={{ color: '#42d4f4' }}
                 activeTabStyle={{backgroundColor: '#EEE'}}
                 textStyle={{ color: 'grey' }} >
              <ArticlesNew {...this.props} />
            </Tab>
            <Tab tabStyle={{backgroundColor: '#EEE', borderLeftWidth:0,marginLeft:0}}
                 heading="Pro"
                 activeTextStyle={{ color: '#42d4f4' }}
                 activeTabStyle={{backgroundColor: '#EEE'}}
                 textStyle={{ color: 'grey' }} >
              <ProContent {...this.props} />
            </Tab>

          </Tabs>
      </Container>
    );
  }
react-native react-native-android react-native-ios native-base

1 回答

  • 1

    我最近发现NativeBase ScrollableTab 组件存在同样的问题 . 这里的问题是TabBar总是有自己的背景颜色，无法通过NativeBase theme colors设置 . 为了解决我的问题，我只是简单地将背景颜色硬编码为 ScrollableTab 组件的样式属性 .

    <Tabs
          renderTabBar={()=> <ScrollableTab style={{backgroundColor: "#ff000" />}>
          ....
        </Tabs>

    （希望这会对你有所帮助，因为这是我对StackOverflow的第一篇文章:-)）

    回复于

相关问题