选项卡栏背景颜色未更改 [英] Tab bar background color did not get changed

问题描述

我是反应原生开发方面的新手。 我在Reaction-Native中为选项卡栏使用了TabNavigator中的反应-导航，除了选项卡栏activeBackoundColor和inactiveBackoundColor在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,
          }
      },
  }
)

如有任何帮助，将不胜感激。

提前谢谢。

推荐答案

感谢大家的帮助，但style为我施展了魔法。
它会将选项卡颜色从蓝色更改为白色(我想要的颜色)。
已从@val的共享link中找到答案。
只需在代码中添加以下3行代码即可更改设计：

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

现在选项卡栏看起来像：

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

这篇关于选项卡栏背景颜色未更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！