我是 React-Native 开发的新手。
我在用标签导航器 from '反应导航' 对于标签栏React-Native,一切工作正常,除了标签栏 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,
}
},
}
)
任何帮助将不胜感激。
提前致谢。
谢谢大家的帮助,但是style
为我施展魔法。
它将选项卡颜色从蓝色更改为白色(我想要的颜色)。
从分享中找到了答案link https://github.com/react-navigation/react-navigation/issues/1485通过@Val。
只需在代码中添加这 3 行就改变了设计:
tabBarOptions:{
//other properties
pressColor: 'gray',//for click (ripple) effect color
style: {
backgroundColor: 'white',//color you want to change
}
}
现在标签栏看起来像:
发布答案是因为它可能对某人有帮助。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)