не работает заголовок реагирующей навигации

Question

Я создаю две вкладки.

Вот мои настройки конфигурации реагирования:

navigator / index.ts

import { createAppContainer, createSwitchNavigator } from 'react-navigation';

import RootScreen from '../components/RootScreen';
import MainStack from './MainStack';

const RootStack = createSwitchNavigator(
  {
    RootScreen: RootScreen,
    MainStack: MainStack
  },
  {
    initialRouteName: 'RootScreen',
  }
)


const AppContainer = createAppContainer(RootStack);

export default AppContainer;

navigator / MainStack.ts

import { createStackNavigator } from 'react-navigation-stack';
import TabsStack from './TabsStack'

const MainStack = createStackNavigator(
  {
    tabs: TabsStack,
  },
  {
    // headerMode: 'none',
  }
);

export default MainStack;

navigator / TabsStack.tsx

import React from 'react';
import { Image } from 'react-native';
import { createBottomTabNavigator } from 'react-navigation-tabs';

import HomeScreen from '../components/HomeScreen/HomeScreen';
import SettingScreen from '../components/SettingScreen/SettingScreen';

import LoveIcon from '../assets/image/heart.png';

const TabsStack = createBottomTabNavigator(
  {
    HomeScreen: {
      screen: HomeScreen,
      navigationOptions: {
        title: 'Home',
        tabBarLabel: 'HomeTab',
        tabBarIcon: ({ focused, tintColor }) => {
          return <Image {...with some props}/>
        },
      }
    },
    SettingScreen: {
      screen: SettingScreen,
      navigationOptions: {
        tabBarLabel: 'STab',
        tabBarIcon: ({ focused, tintColor }) => {
          return <Image {...with some props}/>
        },
      }
    },
  },
  {
    tabBarOptions: {
      showLabel: true,
      activeTintColor: 'blue',
      inactiveTintColor: 'black',
      style: {
        // with some style
      }
    },
  }
);

export default TabsStack;

И я пытаюсь установить заголовок заголовка на моем HomeScreen.tsx, используя static navigationOptions

import React from 'react';
import { View, Text } from 'react-native';

    class HomeScreen extends React.Component {
      static navigationOptions = {
        title: 'HomeScreen Header',
      };

      render() {
        return (
          <View>
            <Text>I am HomeScreen</Text>
          </View>
        );
      }
    }

    export default HomeScreen;

Мой заголовок HomeScreen показывает tabs.

Похоже, static navigationOptions не работает.

Что не так с моими настройками реагирующей навигации?