选项卡背景颜色未改变。

Question

我是React-Native开发的新手。我正在使用来自“react-navigation”的TabNavigator作为React-Native中的选项卡栏，除了选项卡栏的活动背景颜色和非活动背景颜色在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,
          }
      },
  }
)

非常感谢你的帮助。

提前致谢。

- Ajeet Choudhary

Answer 1

感谢大家的帮助，但是 style 对我起了魔法作用。
它将选项卡颜色从蓝色更改为白色（我想要的颜色）。
在@ Val分享的 链接 中找到了答案。
只需在代码中添加这3行就可以改变设计:

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

现在标签栏看起来像这样：

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

- Ajeet Choudhary

Answer 2

我自己还没有使用过TabNavigator，但是根据文档描述，tabBarOptions、activeBackgroundColor和inactiveBackgroundColor只支持iOS系统。可以在这里看到。

我猜你需要自己添加Android的行为。基于这个GitHub Issue，有一个Expo Snack。

直接链接到Expo Snack

- nils

---

似乎对我来说太复杂了，我用简单的方法解决了它，感谢你的努力。 - Ajeet Choudhary

Answer 3

请参考github上的react-native问题1485，这是一个在Android上无法正常工作的(in)activeBackgroundColor bug。

我的解决方法是使用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选项卡）

- Val

---

@AjeetChoudhary 为什么不工作？自从我完成了Android（并且使用快照），一定有些事情可以做。 - Val

我不知道为什么它不工作，可能是某些地方出了问题。我在三个不同的设备上都试过了。然后我在你分享的链接里找到了另一个答案，它对我有用。谢谢。 - Ajeet Choudhary

Answer 4

我更新了Val的答案。

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

- Kumquat601