我需要在我的 react 本机应用程序中从本机基础自定义选项卡（更改其背景颜色），如图所示
我已经尝试过了， style={{ backgroundColor: '#C0C0C0' }}但我一直在使用默认主题。
问问题
30441 次
6 回答
67
您可以将自己的样式应用到本机基本选项卡，如下所示。
<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>
于 2017-03-30T09:38:34.833 回答
25
如果您使用带有标题TabHeading而不是string标题的组件，则使用tabStyle,或textStyle上的道具将不起作用（至少到目前为止）。您必须手动设置,样式。TabTabHeadingTabHeadingIconText
这是一个例子 -
这行不通
<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>
我尝试了☝解决方案。糟透了！（在我看来）。
所以我选择了原始答案，并决定在我的标签标题中没有图标（这是一个更好的价格，而不是处理状态更改延迟）
我还注意到他们有tabStyleand other propsfor TabHeading，所以也许他们正在努力，这只是目前的一个错误？
无论如何，我只是想指出这一点。
于 2018-03-15T19:19:49.810 回答
1
您可以通过以下方式简单地实现：
<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>
于 2019-12-12T12:37:20.107 回答
0
感谢 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>;
我尝试了☝解决方案。它对我有用！
于 2019-11-26T02:18:50.510 回答
0
请注意，如果您在 Tabs 组件的 renderTabBar 方法中使用 ScrollableTab，那么上述示例是部分解决方案，因为您必须在 Tabs 和 Tab 组件的嵌套组件上应用所需的样式。因此，如果您使用的是 ScrollableTab 组件，我建议您将样式直接应用于 ScrollableTab 组件。检查以下示例：
<Tabs renderTabBar={() => <ScrollableTab style={{ backgroundColor: "your colour" }} />}>
Your Tab Content
</Tabs>
有关更多参考，请参阅此 github 问题
于 2019-03-31T00:08:40.153 回答
0
尝试：
<ScrollableTab style={{borderBottomWidth: 0, backgroundColor: 'some_color'}}
/>
或者
<TabHeading style={{
backgroundColor: 'some_color',
borderBottomWidth: 0,
}}>
或将以下道具/属性添加到组件：
tabBarUnderlineStyle={{backgroundColor: '#eff2f8'}}
于 2019-09-06T13:48:27.377 回答