0

我正在使用简单的 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>
4

1 回答 1

0

改成这样

    <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', fontWeight: '100' }}
          activeTextStyle={{ fontWeight: '800',color: 'white'  }}>
          <Text>Hi this is from Courses</Text>
        </Tab>

        <Tab
          heading="Chat"
          tabStyle={{ backgroundColor: 'white' }}
          activeTabStyle={{ backgroundColor: 'orangered' }}
          textStyle={{ color: 'black', fontWeight: '100' }}
          activeTextStyle={{ fontWeight: '800',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>

在此处检查工作示例

于 2021-05-04T09:51:24.543 回答