Reagieren Native - Mutterunter Footer nicht die Farbe ändern

Question

Hier ist der Code:

// 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', 

hier ist das Ergebnis:

ich direkt bearbeiten FooterTab.js habe versucht, aber nicht überhaupt geändert.

Die einzigen Änderungen, die beim Rendern auftreten können, sind tabActiveBgColor: platform === 'ios' ? '#1569f4' : '#1569f4'. Und ich weiß nicht einmal, warum nur dieser Code funktioniert, ich habe auch keinen active auf FooterTab gesetzt.

Was ich erwartet habe ist, wenn ich aktiv bin, werden der Button und der Text weiß.

Jede Lösung?

Answer 1

Sie benötigen Wert von tabActiveBgColor in platform.js nicht ändern commonColor.js

Answer 2

ich dieses Problem gelöst habe Stil für das Hinzufügen in FooterTab .Sie müssen nicht Footer jedes Styling in nativer Basis zu tun component.Here ist meine Quelle code-

 <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>