微信等大部分app的tabBar上面的小圖標都是點中的以深色顯示，未點中的以淺色顯示，這次結合react-native-vector-icons實現了這個目標。
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} />
)
}
一開始怎么調都是下圖這樣，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 傳遞的參數有focused 和 tintColor兩個屬性，加上去就行了。
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} />
