标签栏背景颜色没有改变

Question

我是 React-Native 开发新手。我在 React-Native 中使用来自 'react-navigation' 的 TabNavigator 作为标签栏，一切都是工作正常，除了标签栏 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,
          }
      },
  }
)

任何帮助将不胜感激。

提前致谢。

Answer 1

从那以后我还没有自己使用过 TabNavigator，但是，据文档描述 tabBarOptions，activeBackgroundColor 和 inactiveBackgroundColor 仅支持 iOS. As seen here

我想您必须自己添加 Android 的行为。有基于此的Expo SnackGitHub Issue

Direct link to the expo

Answer 2

请参阅 github react-native issue 1485，这是一个错误 (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 选项卡）

Answer 3

感谢大家的帮助，但是 style 对我来说很神奇。
它将选项卡颜色从蓝色更改为白色（我想要的颜色）。
从@Val.
分享的 link 中找到答案只需在代码中添加这 3 行即可更改设计：

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

现在标签栏看起来像：

张贴答案，因为它可能对某人有帮助。

Answer 4

我更新.

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

标签栏背景颜色没有改变

Tab bar background color did not get changed

android

jsx

tabnavigator

react-native

react-navigation