反应原生tabnavigator图标

Question

大家晚上好！ 我想点击它时改变tabnavigator图标的颜色，但我不能这样做。你能帮助我或给我另一种选择吗？

 const Tabs = TabNavigator({
About : { screen : About },
Search : { screen  : Search },
Trois : { screen : Trois },
Quatre : { screen : Quatre }

}，{ tabBarPosition: 'bottom', animationEnabled: true, tabBarOptions: { activeTintColor: 'green', inactiveTintColor: 'grey', showIcon: true, showLabel: false, style:{ backgroundColor:'#FFF', borderTopWidth:1, borderColor:'#a2273c' } }, })

static navigationOptions = {
 tabBarIcon : ({tintColor}) =>{  

return <Image source={require('../icon/un.png')} style={{width:22,height:22,color:tintColor}} /> 

},

Answer 1

如上所述，您可以通过向tintColor道具提供价值来更改图片的tintColor。

  

tintColor ：color

     

将所有非透明像素的颜色更改为 tintColor 。

tabBarIcon : ({tintColor}) => {
    return <Image source={require('../icon/un.png')} style={{width:22,height:22, tintColor}} />
}