用react-navigation 如何实现 tabBar 上的

微信等大部分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} />