如何在一个标题下指定不同的样式？

Question

<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
  }
});

以上是我使用Tab中的NativeBase组件的方式。在heading部分下面是一个字符串，包含2行，第一行是日期，第二行是星期几。我想知道是否有一种配置方式，以便这两行将有一个单独的样式，而不是共享完全相同的样式，因为我试图使每周的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>

Answer 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的样式，除非您没有特定的主题，因此您还需要有条件地传递样式。

Answer 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 }
})