React Native Tab 背景变化答案

【问题标题】：React native Tab background ChangeReact Native Tab 背景变化
【发布时间】：2021-07-26 14:50:52
【问题描述】：

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

【问题讨论】：

你在说@react-navigation/bottom-tabs??
从'native-base'导入 { Container, Tab, Tabs, StyleProvider };但整条线都变成了蓝色背景。主要是背景没有变化
我建议你使用Material Top Bar Navigator。它的文档非常简单且切中要害。
那么你能告诉我改变背景颜色吗？

标签： reactjs react-native tabs react-tabs

【解决方案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 }} >

要更改标签空间内的背景颜色，请将 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

【讨论】：

谢谢这对我有用，但我想在选定的标签上加下划线。怎么做？所选选项卡的背景也是橙色的，但其文本不可见。看不出来如何让它可见？
检查我的答案我还添加了设置underline 样式的方法.. 还可以查看零食链接以查看工作示例
嗨，太棒了。多谢。但是我选择的选项卡的文本不可见。如何让它可见？我正在使用安卓设备
添加了文本不可见的修复..现在它将可见
超级.. 太棒了。它像我想要的那样工作。非常感谢。