Aje*_*ary 5 android jsx tabnavigator react-native react-navigation
我是 React-Native 开发的新手。我正在使用' react-navigation '中的TabNavigator作为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,
}
},
}
)
Run Code Online (Sandbox Code Playgroud)
任何帮助将不胜感激。
提前致谢。
感谢大家的帮助,但style为我做了魔法。
它将标签颜色从蓝色更改为白色(我想要的颜色)。
从@Val 的共享链接中找到了答案。
只需在代码中添加这 3 行就改变了设计:
tabBarOptions:{
//other properties
pressColor: 'gray',//for click (ripple) effect color
style: {
backgroundColor: 'white',//color you want to change
}
}
Run Code Online (Sandbox Code Playgroud)
现在标签栏看起来像:
发布答案是因为它可能对某人有所帮助。
| 归档时间: |
|
| 查看次数: |
16249 次 |
| 最近记录: |