我是 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 许可协议
感谢大家的帮助,但是
style
为我做了魔法。它将选项卡颜色从蓝色更改为白色(我想要的颜色)。
从@Val 的共享 链接 中找到答案。
只需在代码中添加这 3 行即可更改设计:
现在标签栏看起来像:
发布答案,因为它可能对某人有帮助。