微信等大部分app的tabBar上面的小圖標(biāo)都是點(diǎn)中的以深色顯示武花，未點(diǎn)中的以淺色顯示展哭，這次結(jié)合react-native-vector-icons實(shí)現(xiàn)了這個(gè)目標(biāo)相艇。
const MainScreenNavigator = TabNavigator({
Home: {screen: HomeScreen},
Inform: {screen: InformScreen},
scoreRate: {screen: scoreRateNavigator},
Faq: {screen: FaqScreen}
},
{
tabBarOptions: {
activeTintColor: '#3b5998',
inactiveTintColor: '#cccccc'
},
});
static navigationOptions = {
tabBar: {
label: 'Home',
icon: (obj) => (
<Icon name="rocket" size={30} color= {obj.tintColor} />
)
}
一開始怎么調(diào)都是下圖這樣堕油，icon顏色不變封救。
Paste_Image.png
原因是沒看到文檔這句話
tabBarIcon
React Element or a function that given { focused: boolean, tintColor: string }
returns a React.Element, to display in tab bar
意思是icon 傳遞的參數(shù)有focused 和 tintColor兩個(gè)屬性，加上去就行了杏慰。
Paste_Image.png
Paste_Image.png
另：如果用image的話寫成
image = obj.focused ? require('./1/png') : require('./2.png');
return <Image style={{height:40, width:40}}
source={image} />
