问题描述
我是反应原生开发方面的新手。 我在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
}
}
现在选项卡栏看起来像:
发布答案,因为它可能会对某人有所帮助。