web-dev-qa-db-fra.com

Personnaliser les onglets de la base native

Je dois personnaliser les onglets (changer leur couleur d'arrière-plan) à partir de la base native dans mon application native react, comme indiqué dans l'image enter image description here

J'ai déjà essayé ça style={{ backgroundColor: '#C0C0C0' }} mais j'obtiens toujours le thème par défaut.

androidiosreact-nativetabsnative-base
10
user3521011

Vous pouvez appliquer votre propre style aux onglets de base natifs comme ci-dessous.

<Tabs tabBarUnderlineStyle={{borderBottomWidth:2}}>
    <Tab heading="Popular" tabStyle={{backgroundColor: 'red'}} textStyle={{color: '#fff'}} activeTabStyle={{backgroundColor: 'red'}} activeTextStyle={{color: '#fff', fontWeight: 'normal'}}>
        // tab content
    </Tab>
    <Tab heading="Popular" tabStyle={{backgroundColor: 'red'}} textStyle={{color: '#fff'}} activeTabStyle={{backgroundColor: 'red'}} activeTextStyle={{color: '#fff', fontWeight: 'normal'}}>
        // tab content
    </Tab>
</Tabs>
50
Irfan Ali

Si vous utilisez un composant avec TabHeading au lieu de l'en-tête string, utilisez les accessoires tabStyle, textStyle sur le Tab ou TabHeading ne fonctionnera pas (du moins pour l'instant). Vous devrez styliser vos TabHeading, Icon et Text manuellement.

Voici un exemple -

Cela ne fonctionnera pas

<Tabs tabBarUnderlineStyle={{borderBottomWidth:2}}>
   <Tab heading={<TabHeading>
                 <Icon name="icon_name" />
                 <Text>Popular</Text>
               </TabHeading>}  
      tabStyle={{backgroundColor: 'red'}} textStyle={{color: '#fff'}} 
      activeTabStyle={{backgroundColor: 'red'}} activeTextStyle={{color: '#fff', fontWeight: 'normal'}}>
       // tab content
   </Tab>
   <Tab 
       heading={<TabHeading>
                 <Icon name="icon_name" />
                 <Text>Popular</Text>
               </TabHeading>} 
      tabStyle={{backgroundColor: 'red'}} textStyle={{color: '#fff'}} 
      activeTabStyle={{backgroundColor: 'red'}} activeTextStyle={{color: '#fff', fontWeight: 'normal'}}>
       // tab content
   </Tab>
</Tabs>

Cela ne fonctionnera pas même si vous déplacez tabStyle et d'autres accessoires vers le composant TabHeading.

Mais cela fonctionnera

<Tabs tabBarUnderlineStyle={{borderBottomWidth:2}}>
   <Tab heading={<TabHeading style={{backgroundColor: 'red'}}>
                 <Icon name="icon_name" style={{color: '#ffffff'}} />
                 <Text style={{color: '#ffffff'}}>Popular</Text>
               </TabHeading>}>
       // tab content
   </Tab>
   <Tab 
       heading={<TabHeading style={{backgroundColor: 'red'}}>
                 <Icon name="icon_name" style={{color: '#ffffff'}} />
                 <Text style={{color: '#ffffff'}}>Popular</Text>
               </TabHeading>}>
       // tab content
   </Tab>
</Tabs>

Si vous souhaitez changer de style d'onglet actif

<Tabs tabBarUnderlineStyle={{borderBottomWidth:2}} initialPage={this.state.currentTab} onChangeTab={({ i }) => this.setState({ currentTab: i })}>
   <Tab heading={<TabHeading style={this.state.currentTab == 0 ? styles.activeTabStyle : styles.inactiveTabStyle}>
                 <Icon name="icon_name" style={this.state.currentTab == 0 ? styles.activeTextStyle : styles.inactiveTextStyle} />
                 <Text style={this.state.currentTab == 0 ? styles.activeTextStyle : styles.inactiveTextStyle}>Popular</Text>
               </TabHeading>}>
       // tab content
   </Tab>
   <Tab 
       heading={<TabHeading style={this.state.currentTab == 1 ? styles.activeTabStyle : styles.inactiveTabStyle}>
                 <Icon name="icon_name" style={this.state.currentTab == 1 ? styles.activeTextStyle : styles.inactiveTextStyle} />
                 <Text style={this.state.currentTab == 1 ? styles.activeTextStyle : styles.inactiveTextStyle}>Popular</Text>
               </TabHeading>}>
       // tab content
   </Tab>
</Tabs>

J'ai essayé la solution ☝. Ça craint! (à mon avis).

Je suis donc allé avec la réponse d'origine et j'ai décidé de ne pas avoir d'icône dans ma rubrique Tab (ce qui était un meilleur prix à payer plutôt que de faire face au délai de changement d'état)

J'ai également remarqué qu'ils ont tabStyle et d'autres props pour TabHeading, alors peut-être qu'ils y travaillent et que c'est juste un bug à ce moment?

enter image description here

Quoi qu'il en soit, je voulais juste le souligner.

17
Aswin Ramakrishnan

Essayez:

<ScrollableTab style={{borderBottomWidth: 0, backgroundColor: 'some_color'}} 
/>

o

<TabHeading style={{
                backgroundColor: 'some_color',
                borderBottomWidth: 0,
}}>

ou ajoutez ci-dessous prop/attribut au composant:

tabBarUnderlineStyle={{backgroundColor: '#eff2f8'}}
0
anoNewb

Notez simplement que si vous utilisez ScrollableTab dans la méthode renderTabBar du composant Tabs, les exemples ci-dessus sont des solutions partielles dans la mesure où vous devrez appliquer les styles souhaités aux composants imbriqués du composant Tabs and Tab. Donc, si vous utilisez le composant ScrollableTab, je vous suggère d'appliquer les styles directement au composant ScrollableTab. Consultez l'exemple ci-dessous:

<Tabs renderTabBar={() => <ScrollableTab style={{ backgroundColor: "your colour" }} />}>
 Your Tab Content
</Tabs>

Pour plus de référence, voir ce problème github

0
KMD