Изменить заголовок Заголовок табнавигатора в стекнавигаторе

Question

У меня есть следующие настройки.Мой MainNavigator - StackNavigator.

const MainNavigator = createStackNavigator(
  {
    Tabs: {
      screen: BottomTabNavigator,
    },
  },
  {
    initialRouteName: 'Tabs',
    defaultNavigationOptions: {
      title: 'Main title',
    },
  },
);

Так что по умолчанию headerTitle будет установлено на Основной заголовок , который работает, как и ожидалось.Внутри этого StackNavigator у меня есть TabNavigator:

const BottomTabNavigator = createBottomTabNavigator(
  {
    DashboardTab: {
      screen: Dashboard,
      navigationOptions: () => ({
        tabBarLabel: 'Dashboard',
        title: 'Dashboard 2',
        headerTitle: 'Dashboard 2',
      }),
    },
    OverviewTab: {
      screen: OverviewTabNavigator,
      navigationOptions: () => ({
        tabBarLabel: 'Overview',
        title: 'Overview 1',
        headerTitle: 'Overview 2',
      }),
    },
  },
  {
    initialRouteName: 'DashboardTab',
  },
);

export default BottomTabNavigator;

Я пытаюсь переписать заголовок по умолчанию с этими компонентами.Но это не похоже на работу.

Я также пытался перезаписать его в самом компоненте с помощью статического navigationOptions:

class Dashboard extends React.Component {
  static navigationOptions = {
    title: 'Dashboard 3',
    headerTitle: 'Dashboard 3',
  };

  render() {
    return (
      <DashboardContainer>
        <Text>{instructions}</Text>
      </DashboardContainer>
    );
  }
}

Но это также не работает .. Есть ли что-то, что я неправильно понимаю?Вместо этого всегда отображается Main title .Не могу найти ничего полезного из таких вложенных переходов с примерами заголовков в документах.