代码之家 › 专栏 › 技术社区 › Ajeet Choudhary Sagar Shah

选项卡栏背景色未更改

tabnavigator react-navigation jsx react-native android

Ajeet Choudhary Sagar Shah · 技术社区 · 7 年前

我是一个新手。我正在使用 选项卡导航器 从' 反应导航 '用于中的选项卡栏 本机反应 ,一切正常,除了选项卡栏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,
          }
      },
  }
)

任何帮助都将不胜感激。

提前谢谢。

4 回复 | 直到 7 年前

SherylHohman David 6 年前

谢谢大家的帮助,但是 style 为我施了魔法。
它将选项卡颜色从蓝色更改为白色(我想要的颜色)。
从共享中找到答案 link 由@Val。
仅仅在代码中添加这三行就改变了设计:

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

现在,选项卡栏看起来像:

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

nils 7 年前

我还没有自己使用过TabNavigator,但据文档描述 tabBarOptions , activeBackgroundColor 和 inactiveBackgroundColor 仅支持iOS。 As seen here

我想你必须自己添加Android的行为。有一种世博会小吃就是基于这个 GitHub Issue

Direct link to the expo

Val 7 年前

参考github react-native issue 1485 ,这是activeBackgroundColor中的一个bug,不适用于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选项卡)

Kumquat601 4 年前

I更新 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 价值