自定义原生库的标签

Question

我需要在我的 React Native 应用程序中从本机基础自定义选项卡（更改它们的背景颜色），如图所示

我已经试过了 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 标题的组件，请使用 Tab 上的 tabStyle、textStyle 道具或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 和 TabHeading 的其他 props，所以也许他们正在努力，这只是目前的一个错误？

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

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

或将下面的 prop/attribute 添加到组件中：

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>

自定义原生库的标签

Customise tabs of native base

android

ios

react-native

tabs

native-base

这行不通

但这行得通

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

如果您想要切换活动标签样式（用于循环）