2番目と3番目のスクロール可能なタブの境界に出現していてはならないものがあります。

Question

私は反応ネイティブのスクロール可能なタブとネイティブベースを使用しています。 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> 
    ); 
    } 

Answer 1

最近NativeBase ScrollableTabコンポーネントで同じ問題が検出されました。ここでの問題は、TabBarには常にNativeBase theme colorsで設定できない独自の背景色があることです。私の問題を解決するために、私はちょうどScrollableTabコンポーネントのスタイルプロパティとして背景色をハードコードしました。

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

（それはStackOverflowの:-)に私の非常に最初の投稿ですので、これは、あなたのお役に立てば幸いです）