标签栏背景颜色没有改变

新手上路,请多包涵

我是 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,
          }
      },
  }
)

任何帮助将不胜感激。

提前致谢。

原文由 Ajeet Choudhary 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 258
2 个回答

感谢大家的帮助,但是 style 为我做了魔法。

它将选项卡颜色从蓝色更改为白色(我想要的颜色)。

从@Val 的共享 链接 中找到答案。

只需在代码中添加这 3 行即可更改设计:

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

现在标签栏看起来像:

在此处输入图像描述

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

原文由 Ajeet Choudhary 发布,翻译遵循 CC BY-SA 3.0 许可协议

我更新 了 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 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题