标签栏背景颜色没有改变

Posted 2023-02-21

【中文标题】标签栏背景颜色没有改变

【英文标题】：Tab bar background color did not get changed

【发布时间】：2018-06-13 22:27:40

【问题描述】：

我是 React-Native 开发的新手。 我正在使用 react-navigation 中的 TabNavigator 作为 React-Native 中的标签栏，除了标签栏 activeBackgroundColor 和 inactiveBackgroundColor 之外，一切正常在android中不会改变。 它只显示蓝色，如下图所示。

我使用的代码是：

import React,  Component  from 'react';
import  TabNavigator  from 'react-navigation';
import  PixelRatio  from 'react-native';

import  ColorScheme  from '../Resources/ColorScheme';
import Fonts from '../Resources/Fonts';

import TAB1 from '../Screens/TAB1'
import TAB2 from '../Screens/TAB2'
 /** */
 var FONT_SIZE = 8;
 if (PixelRatio.get() === 2) 
  FONT_SIZE=10
 else if (PixelRatio.get() === 3) 
    FONT_SIZE=12
  

export default FavoritesScreenTabNavigator=TabNavigator(
    TAB1:screen:TAB1,
    TAB2:screen:TAB2
  ,
      tabBarPosition:'top',
      swipeEnabled:true,
      animationEnabled:true,
      tabBarOptions:
          activeTintColor:ColorScheme.tabBarSelectedTintColor,
          inactiveTintColor:ColorScheme.tabBarUnSelectedTintColor,
          activeBackgroundColor:'white',
          inactiveBackgroundColor:'white',
          labelStyle:
            fontSize: FONT_SIZE,
            fontFamily: Fonts.QuicksandBold,
            textAlign:'center'
          ,
          indicatorStyle: 
            borderBottomColor:ColorScheme.tabBarSelectedTintColor,
            borderBottomWidth: 3,
          
      ,
  
)

任何帮助将不胜感激。

提前致谢。

【参考方案1】：

我更新Val's answer。

 tabBarOptions:
      //other properties
      pressColor: 'gray',//for click (ripple) effect color
      style: 
        backgroundColor: 'white',//color you want to change
      ,
      indicatorStyle: 
        backgroundColor: 'your indicator background color',
        height: '100%',
        borderBottomColor: 'your indicator bottom bar color',
        borderBottomWidth: 1
      ,
  

破解是height 值！

【参考方案2】：

感谢大家的帮助，但 style 为我创造了魔力。 它将标签颜色从蓝色更改为白色（我想要的颜色）。 从@Val 分享的link 中找到答案。 只需在代码中添加这 3 行代码就改变了设计：

tabBarOptions:
      //other properties
      pressColor: 'gray',//for click (ripple) effect color
      style: 
        backgroundColor: 'white',//color you want to change
      
  

现在标签栏看起来像：

发布答案，因为它可能对某人有所帮助。

【参考方案3】：

请参阅 github react-native issue 1485，这是一个 bug（in）activeBackgroundColor 在 Android 上不起作用。

我的解决方法是使用indicatorStyle 来模拟，示例代码：

注意：记得加...TabNavigator.Presets.AndroidTopTabs，没有这个指标可能无法工作。

tabBarOptions: 
    ...TabNavigator.Presets.AndroidTopTabs,
    indicatorStyle: 
        backgroundColor: mainBackgroundColor,
        borderColor: 'rgb(189,189,189)',
        borderWidth: 1,
        borderBottomWidth: 0,
        borderRadius: 5,
        borderBottomLeftRadius: 0,
        borderBottomRightRadius: 0,
    

在我的项目中看起来不错。 （请参阅相机/NVR 选项卡）

【讨论】：

@AjeetChoudhary 为什么不工作？因为我已经完成了 Android（和快照），所以一定有什么可以做的。

不知道为什么不行，可能是出了什么问题。我确实尝试过三种不同的设备。然后我在你分享的链接中找到了另一个答案，它对我有用..谢谢

【参考方案4】：

从那以后我还没有使用过 TabNavigator，但据文档描述，tabBarOptions、activeBackgroundColor 和 inactiveBackgroundColor 仅支持 ios。 As seen here

我猜你必须自己添加 Android 的行为。有基于这个GitHub Issue的Expo Snack

Direct link to the expo

【讨论】：

对我来说似乎太复杂了，我已经轻松解决了，感谢您的努力