反应原生标签背景变化

问题描述

我正在使用简单的 React Native 选项卡。该选项卡工作正常，但它显示标签的默认蓝色背景。这意味着“关于课程”和“聊天”排成一行，默认情况下为蓝色。我怎样才能改变它？另外，我怎样才能改变' '这个标题字体系列、文本颜色和其他属性？

<View style={{ backgroundColor: 'red' }}>
  <Tabs tabStyle={{ backgroundColor: 'red' }}>
    <Tab heading="About Test" tabStyle={{ color: 'red' }}>
      <View>
        <Text>Hi THis is from ABout</Text>
      </View>
    </Tab>
    <Tab heading="Courses">
      <Text>Hi this is from Courses</Text>
    </Tab>
    <Tab heading="Chat">
      <Text>This is from Chat</Text>
    </Tab>
  </Tabs>
</View>

解决方法

改成这样

    <Tabs tabBarUnderlineStyle={{ backgroundColor: 'dodgerblue' }}>
        <Tab
          heading="About Test"
          tabStyle={{ backgroundColor: 'white' }}
          activeTabStyle={{ backgroundColor: 'orangered' }}
          textStyle={{ color: 'black',fontWeight: '100' }}
          activeTextStyle={{ fontWeight: '800',color: 'white' }}>
          <View>
            <Text>Hi THis is from ABout</Text>
          </View>
        </Tab>

        <Tab
          heading="Courses"
          tabStyle={{ backgroundColor: 'white' }}
          activeTabStyle={{ backgroundColor: 'orangered' }}
          textStyle={{ color: 'black',color: 'white'  }}>
          <Text>Hi this is from Courses</Text>
        </Tab>

        <Tab
          heading="Chat"
          tabStyle={{ backgroundColor: 'white' }}
          activeTabStyle={{ backgroundColor: 'orangered' }}
          textStyle={{ color: 'black',color: 'white'  }}>
          <Text>This is from Chat</Text>
        </Tab>
      </Tabs>

对于 underline 样式只需添加

tabBarUnderlineStyle={{ backgroundColor: 'dodgerblue' }}

到<Tabs tabBarUnderlineStyle={{ backgroundColor: 'dodgerblue' }} />

同样在 Android 上，我看到不设置 activeTextStyle 颜色不显示文本..要解决此问题，请添加

activeTextStyle={{ fontWeight: '800',color: 'white' }}> // Color as you desire

用于去除框周围的边框

将 tabContainerStyle={{ elevation: 0 }} 添加到 <Tabs />，像这样

 <Tabs tabBarUnderlineStyle={{ backgroundColor: 'dodgerblue' }} tabContainerStyle={{ elevation: 0 }} >

要更改内部标签空间的背景颜色，请将 style={{ backgroundColor: 'grey' }} 添加到 <Tab />，如下所示

<Tab
  heading="About Test"
  style={{ backgroundColor: 'grey' }}> // This line right here
      <View>
        <Text>Hi THis is from ABout</Text>
      </View>
</Tab>

检查工作示例 here