自定义本机基础的选项卡

Question

我需要在我的react本机应用程序中自定义选项卡(更改其背景颜色),如图中所示

我已经尝试了这个, style={{ backgroundColor: '#C0C0C0' }}但我一直在获得默认主题.

Answer 1

您可以将自己的样式应用于本地基本选项卡,如下所示.

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

Answer 2

如果你使用一个component,TabHeading而不是string标题,使用tabStyle,textStyle道具上Tab或TabHeading将无法正常工作(ATLEAST截至目前).你必须要自己的风格TabHeading,Icon和Text手动.

这是一个例子 -

这不行

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

即使您移动tabStyle和其他道具到TabHeading组件,它也不会起作用.

但这会奏效

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

如果要激活切换样式切换

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

我试过☝解决方案.太糟糕了!(在我看来).

所以我选择了原来的答案并决定不在我的标题标题中有一个图标(这是一个更好的代价,而不是处理状态变化延迟)

我也注意到他们已经tabStyle和其他人一样props了TabHeading,所以也许他们正在努力,这只是一个时间错误？

无论如何,我只想指出这一点.