Как установить значок TabNavigator под заголовком StackNavigator?

Question

Я должен установить заголовок в верхней части главной страницы, но TabNavigator по умолчанию верх. Как мне отредактировать это? TabNavigator всегда вверху страницы.

const HomeStack = createStackNavigator({
  Home: { screen: Home,navigationOptions: {headerStyle: {
            backgroundColor: '#222222',},headerTintColor: 'white',headerTitle:'title1',headerBackTitle: ' '} },
});
const OtherStack = createStackNavigator({
    Other: { screen: Other,navigationOptions: {headerStyle: {
              backgroundColor: '#222222'},headerTintColor: 'white',headerTitle:'title2'} }
}); 
const MainScreenNavigator = TabNavigator(
  {
    Home: {screen : HomeStack},
    Other: {screen : OtherStack},
  },
  {

    tabBarComponent: props => {

      return (
        <View>
        <Footer>
          <FooterTab>
            <Button 1/>
            <Button 2/> 
          </FooterTab>
        </Footer>
        </View>

      );
    }
  });