如何自定义React Navigation中的选定选项卡？

Question

我正在使用React Navigation。我使用自定义tabBarComponent创建了一些标签和customisez标签栏。在自定义标签栏组件中，我创建了标签，但是我无法将tintColor或activeBackgroundColor等应用到焦点标签。

const TabBarComponent = (props) => (<TabContent {...props} />);

const TabNav= createBottomTabNavigator(
    {
        Tab1: Tab1Screen,
        Tab2: Tab2Screen,            
    },
    { 
        initialRouteName: 'Tab2',
        tabBarComponent: props =>(
          <TabBarComponent
             {...props}
             style={{ borderTopColor: '#605F60' }}
          />),
        // navigationOptions: ({navigation})=>({
        //     tabBarIcon: ({focused, tintColor})=>{
        //         const { routeName } = navigation.state;
        //         let iconName;
        //         switch(routeName) {
        //                     case "Tab1":
        //                         iconName = `ios-search${focused ? '' : '-outline'}`;
        //                         break;
        //                     case "Tab2":
        //                         iconName = `ios-heart${focused ? '' : '-outline'}`;
        //                         break;
        //                     default:
        //                         break;
        //                     }
        //         return <Icon name={iconName} color={tintColor} />;
        //     },
        // }),
        tabBarOptions: {
            activeTintColor: 'tomato',
            inactiveTintColor: 'grey',
            activeBackgroundColor: 'red',
            labelStyle: {
                fontSize: 15,
            },
            // style for tabbar
            style: {
                backgroundColor: '#ffffff',
                height: 60,
                justifyContent: 'space-around',
                alignContent: 'center',
                alignItems: 'center',
            },
            // style for tab
            tabStyle: {
                paddingTop: 7,
                paddingBottom: 7
            }
        },
    }
)

我的自定义TabComponent在这里

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import {Footer, FooterTab, Button, Icon } from 'native-base';

class TabContent extends Component {

    render(){
        return(
            <Footer>
                <FooterTab style={{backgroundColor: 'white'}}>
                    <Button vertical onPress={()=>this.props.navigation.navigate('Tab1')}>
                        <Icon name="ios-search" />
                        <Text>SEARCH</Text>
                    </Button>
                    <Button vertical onPress={()=>this.props.navigation.navigate('Tab2')}>
                        <Icon name="ios-heart" />
                        <Text>SAVED</Text>
                    </Button>
                </FooterTab>
            </Footer>
        );
    }
}

export default TabContent;

我可以在tabContent中获得道具，但是如何使用它在焦点选项卡上获得不同的backgroundcolor或tintColor呢？