Question

我需要在我的反应原生应用程序中自定义选项卡（更改其背景颜色），如图像

所示

我已经尝试了这个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

如果您使用TabHeading而不是string标题的组件，请使用tabStyle上的textStyle，Tab道具或TabHeading不会工作（至少截至目前）。您必须手动设置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，所以也许他们正在研究它，这只是一个错误吗？

无论如何，我只想指出这一点。

Answer 3

请注意，如果在Tabs组件的renderTabBar方法中使用ScrollableTab，则以上示例是部分解决方案，因为您将必须在Tabs和Tab组件的嵌套组件上应用所需的样式。因此，如果您使用的是ScrollableTab组件，我建议您将样式直接应用于ScrollableTab组件。检查以下示例：

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

有关更多参考，请参见this github issue

Answer 4

尝试：

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

或

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

或在组件的属性/属性下方添加：

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

Answer 5

感谢Aswin Ramakrishnan的回答，但修改了更多:)

如果您想进行有效的制表符样式切换（用于循环）

<Tabs
  tabBarUnderlineStyle={{ borderBottomWidth: 2 }}
  initialPage={this.state.currentTab}
  onChangeTab={({ i }) => this.setState({ currentTab: i })}
>
  {dataArray.map((item, key) => {
    return (
      <Tab
        tabStyle={{
          backgroundColor: Colors.defaultColor,
          color: Colors.grayText
        }}
        activeTabStyle={{
          backgroundColor: Colors.defaultColor
        }}
        heading={
          <TabHeading
            textStyle={styles.inactiveTextStyle}
            style={
              this.state.currentTab === key
                ? styles.activeTabStyle
                : styles.inactiveTabStyle
            }
          >
            <Text
              style={
                this.state.currentTab === key
                  ? styles.activeTextStyle
                  : styles.inactiveTextStyle
              }
            >
              {item.title}
            </Text>
          </TabHeading>
        }
      >
        {this._renderContent(item)}
      </Tab>
    );
  })}
</Tabs>;

我尝试了解。 对我有用！

Answer 6

您可以通过以下方式轻松实现：

<Tabs initialPage={this.state.index} 
            tabBarBackgroundColor='#fff'
            headerTintColor= '#fff'
            tabBarUnderlineStyle = {{backgroundColor: navigationColor}}
            tabBarPosition="top"
            onChangeTab={({ i }) => this.updateTabIndex(i)}
            >
                <Tab
                    heading={
                    <TabHeading style={{backgroundColor: '#fff'}}>
                        <Image source = {require('../../assets/Images/icon.png')} 
                        style = {styles.tabIcon}/>
                    </TabHeading>}
                >
                </Tab>
</Tabs>

自定义本机基础的选项卡

6 个答案:

这不会起作用

但这会起作用

如果您想要活动标签样式切换

如果您想进行有效的制表符样式切换（用于循环）