如何在一个标题下分配不同的样式？答案

【问题标题】：How to assign different style under one heading?如何在一个标题下分配不同的样式？
【发布时间】：2018-04-16 03:17:28
【问题描述】：

<Tabs 
  initialPage={moment().date()}
  tabBarUnderlineStyle={{ backgroundColor: '#5AF158' }} 
  renderTabBar={() => <ScrollableTab />}
>
  {this.renderTabHeader()}
</Tabs>

renderTabHeader() {
    return (
      this.props.dateArray.map((date) => 
        <Tab 
          heading={date.format('DD/MM') +'\n'+this.props.weekdayArray[date.day()]}
          tabStyle={styles.tabStyling} 
          activeTabStyle={styles.activeTabStyle} 
          textStyle={styles.tabTextStyle} 
          activeTextStyle={styles.activeTabTextStyle} 
        >
          <View style={{backgroundColor:'#EEEEEE', flex: 1}}>
            <Content contentDate={date.format('DD/MM')} />
          </View>
        </Tab>
      )
    );
  }

  const styles = StyleSheet.create({
  tabStyling: {
    backgroundColor: "#37b372"
  },
  activeTabStyle: {
    backgroundColor: "#37b372"
  },
  tabTextStyle: {
    color: '#96DCA6'
  },
  activeTabTextStyle: {
    fontWeight: 'bold',
    color: 'white',
    fontSize: 20
  }
});

以上是我使用来自NativeBase 的Tab 组件的方式。在heading 部分是一个字符串，由两行组成，第一行是日期，第二行是星期几。我想知道是否有一种方法可以配置，以便这两行将具有单独的样式，而不是共享完全相同的样式，因为我正在尝试使星期几的 fontSize 更小。

更新：

实现@Pritish推荐的TabHeading块将删除所有tabStyling、activeTabStyling，如下所示：

<Tab 
          heading={
            <TabHeading style={{ flexDirection: 'column'}}>
                <Text style={{ fontSize: 20 }}>{date.format('DD/MM')}</Text>
                <Text style={{ fontSize: 15 }}>{this.props.weekdayArray[date.day()]}</Text>
             </TabHeading>
          }
          tabStyle={styles.tabStyling} 
          activeTabStyle={styles.activeTabStyle} 
          textStyle={styles.tabTextStyle} 
          activeTextStyle={styles.activeTabTextStyle} 
        >
          <View style={{backgroundColor:'#EEEEEE', flex: 1}}>
            <Content contentDate={date.format('DD/MM')} />
          </View>
        </Tab>

【问题讨论】：

标签： react-native tabs styles native-base

【解决方案1】：

Native Base 提供TabHeading 包装器，因此您可以将其自定义为

示例：

import {Text, Tab, TabHeading, Content, Tabs} from 'native-base'
// Setting the initial State
constructor(props) {
        super()
        this.state = {
            currentTab: 0
        }
    }

<Tabs
   initialPage={this.state.currentTab}
   onChangeTab={({ i }) => this.setState({ currentTab: i })}
   renderTabBar={()=> <ScrollableTab/>}>
>
      <Tab
          heading={
             <TabHeading style={this.state.currentTab === 0 ? styles.activeTabStyle : styles.tabStyling}
      >
                <Text styles={this.state.currentTab === 0 ? styles.activeTabTextStyle : styles.tabTextStyle}>{'Pritish'}</Text>
                <Text styles={this.state.currentTab === 0 ? styles.activeTabTextStyle : styles.tabTextStyle}>{'Vaidya'}</Text>
             </TabHeading>
                   }
        >
           <View style={{ backgroundColor: '#EEEEEE', flex: 1 }}>
              <Content contentDate={moment().format('DD/MM')} />
           </View>
      </Tab>
</Tabs>

注意 TabHeader 是另一个组件，因此它不会继承 Tabs 的样式，除非您没有特定的主题，因此您还需要有条件地传递样式。

【讨论】：

通过使用这个TabHeading，它确实给了我想要的东西，但它也引入了另一个问题，即删除了所有其他样式，例如tabStyle、activeTabStyle、textStyle 和@987654328 @
抱歉回复晚了，但需要使用 NativeBase 组件。检查更新的答案
感谢您的回复。对于上面列出的组件列表，我确保它遵循相同但仍然产生相同的结果。
如果您也可以在问题中添加样式，并传达您面临错误的确切位置，那就太好了。
我已经更新了我的问题，包括样式以及两个 TabHeader 设置的选项卡屏幕截图，供您参考

【解决方案2】：

尝试根据当前标签动态设置文本样式

import React, { Component } from 'react';
import { Container, Header, Tab, Tabs, TabHeading, Text, ScrollableTab } from 'native-base';
import { StyleSheet } from 'react-native';

const dataArray = [{ day: "Mon", date: "16/04", content: "Tab one" },
{ day: "Tue", date: "17/04", content: "Tab two" },
{ day: "Wed", date: "18/04", content: "Tab three" },
{ day: "Thu", date: "19/04", content: "Tab four" },
{ day: "Fri", date: "20/04", content: "Tab five" },
{ day: "Sat", date: "21/04", content: "Tab six" },
{ day: "Sun", date: "22/04", content: "Tab seven" }]

export default class TabsAdvancedExample extends Component {
  state = { currentPage: 0 }
  render() {
    return (
      <Container>
        <Header />
        <Tabs renderTabBar={() => <ScrollableTab />} tabBarUnderlineStyle={{ backgroundColor: "#00f25f" }} onChangeTab={({ i }) => this.setState({ currentPage: i })}>
          {
            dataArray.map((item, index) => {
              return (<Tab key={String(index)} heading={<TabHeading style={{ flexDirection: 'column', backgroundColor: "#00ba6f" }}><Text style={{ color: "white" }}>{item.date}</Text><Text style={this.state.currentPage === index ? styles.activeDayStyle : styles.dayStyle}>{item.day}</Text></TabHeading>}>
                <Text>{item.content}</Text>
              </Tab>)
            })
          }
        </Tabs>
      </Container>
    );
  }
}
const styles = StyleSheet.create({
  dayStyle: { color: "white", fontSize: 12 },
  activeDayStyle: { color: "white", fontSize: 18 }
})

【讨论】：