我在 activeTintColor 上遇到问题,这些问题是reactnavigation.org的文档,activeTintColor用于标签和活动选项卡的图标颜色。但是,当我尝试我的应用程序时,仅文本会更改图标的颜色,仍然是黑色。我会告诉大家我已经创建的代码
我将给出一个仪表板屏幕示例:
DriverDashScreen: {
screen:DriverDashScreen,
navigationOptions: {
tabBarLabel:"Home",
header: null,
tabBarIcon: ({ tintColor }) => (
<Icon type="FontAwesome5" active name="compass" color={tintColor} style={{fontSize: 18}}/>
),
tabBarOptions: {
activeTintColor: '#2C73D2',
inactiveTintColor: 'gray',
showIcon: true,
labelStyle: {
fontWeight: 'bold',
},
},
},
},
在屏幕上,仅文本更改为蓝色,但图标仍为黑色
我希望有人能帮助我找到问题所在,谢谢。
答案 0 :(得分:2)
是的,activeTintColor
中有tabBarOptions
个选项
答案 1 :(得分:1)
尝试一下:
// change screenA and screenB with your routes.
navigationOptions: ({ navigation }) => ({
tabBarLabel: ({ focused, tintColor }) => {
const { routeName } = navigation.state;
return <Text style={[styles.tabBar, {color: tintColor}]}>{routeName}</Text>
},
tabBarIcon: ({ focused, tintColor }) => {
const { routeName } = navigation.state;
if (routeName === 'screenA') {
return <Fa5Icons name='compass' size={20} color={tintColor} />
} else if (routeName === 'screenB') {
// ...
}
},
})
Fa5Icons
导入者:
import Fa5Icons from 'react-native-vector-icons/FontAwesome5'