反应本机选项卡背景更改

Question

我正在使用简单的 React Native 选项卡。该选项卡工作正常，但它显示标签的默认蓝色背景。这意味着关于课程和聊天是连续的，默认情况下是蓝色的。我该如何更改它？此外，我如何更改' ' 这个标题 font-family、文本颜色和其他属性？

<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>

Answer 1

改成这样

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

要更改内部选项卡的背景颜色 space 将 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

反应本机选项卡背景更改

React native Tab background Change

tabs

reactjs

react-native

react-tabs