はネイティブリアクト - ネイティブベースフッターはここで色

Question

を変更しないコードです：ここ

// Bottom.js 
<StyleProvider style={getTheme(commonColor)}> 
    <Footer> 
     <FooterTab> 
      <Button active> 
       <Icon active name="food" size={24} /> 
       <Text active>Lunch Box</Text> 
      </Button> 
      <Button> 
       <Icon name="coins" size={24} /> 
       <Text>Point</Text> 
      </Button> 
      <Button> 
       <Icon name="face" size={24} /> 
       <Text>Profile</Text> 
      </Button> 
     </FooterTab> 
    </Footer> 

</StyleProvider> 

// commonColor.js 

// Footer 
footerHeight: 55, 
footerDefaultBg: '#ffffff', 

// FooterTab 
tabBarTextColor: '#FFF', 
tabBarTextSize: platform === 'ios' ? 14 : 16, 
activeTab: platform === 'ios' ? '#007aff' : '#fff', 
sTabBarActiveTextColor: '#007aff', 
tabBarActiveTextColor: '#fff', 
tabActiveBgColor: platform === 'ios' ? '#1569f4' : '#1569f4', 

が結果です：

私は直接編集FooterTab.jsを試していないましたが、何のは全く変化。

レンダー時に発生する可能性のある変更はtabActiveBgColor: platform === 'ios' ? '#1569f4' : '#1569f4'です。そして、私はなぜこのコードだけが働いているのかわからなくても、私はactiveをFooterTabに設定していません。

私が期待したのは、ボタンをアクティブにしてテキストを白にすることです。

解決策はありますか？

Answer 1

あなたはネイティブベースでフッター component.Hereを任意のスタイリングを行う必要はありません、私はFooterTab。あなたにスタイルを追加するために、この問題を解決したcommonColor.js

Answer 2

platform.jsにtabActiveBgColorの値を変更する必要はありませんされて

 <Footer> 
      <FooterTab style={{backgroundColor:"#FFF"}}> 
       <Button style={{paddingLeft:0, paddingRight:0}}> 
        <Text}}>iFeeds</Text> 
       </Button> 
       <Button style={{paddingLeft:0, paddingRight:0}}> 
        <Text}}>iFeeds</Text> 
       </Button> 
      </FooterTab> 
    <Footer>