在第二和第3个可滚动的标签边框之间，出现了一定不存在

Question

我正在使用反应滚动的选项卡和本机基础。在第二和第3个可滚动的标签边框之间，出现了一定不存在。我尝试添加borderleftwidth：0，marginleft：0在样式对象中，但没有解决麻烦。

这是代码。

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>
    );
  }

Answer 1

我最近发现了本机基键ScrollableTab组件的同样问题。这里的问题在于，Tabbar确实总是具有自己的背景颜色，无法通过本地基础主题颜色设置。为了解决我的问题，我只是简单地将背景颜色作为ScrollableTab组件的样式属性。

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

（希望这对您有帮助，因为这是我stackoverflow的第一篇文章： - ））