react-navigationのtabNavigatorの背景色を変更する

MainTabNavigator.js

const tabNavigator = TabNavigator(
  {
    Home: { screen: HomeScreen },
    Search: { screen: HomeScreen }
  },
  {
    tabBarOptions: {
      showLabel: false,
      activeTintColor: '#333',
      inactiveTintColor: '#bbb',
    },
    tabBarComponent: TabBar,
    tabBarPosition: 'bottom',
    animationEnabled: false,
    swipeEnabled: false,
  },
);

// check state.index
const TabBar = (props) => {
  const { navigationState } = props;

  let newProps = props;
  if (navigationState.index === 0) {
    newProps = Object.assign(
      {},
      props,
      {
        style: {
          backgroundColor: 'rgba(0,0,0,0.1)',
          position: 'absolute',
          bottom: 0,
          left: 0,
          right: 0
        },
        activeTintColor: '#fff',
        inactiveTintColor: '#bbb',
      },
    );
  }

  return <TabBarBottom {...newProps} />;
};