Проблемы с размещением заголовка на DrawerNavigator в реагирующей навигации

Question

Я пытаюсь получить заголовок на DrawerNavigator в реагирующей навигации. У меня есть DrawerNavigator внутри StackNavigator, и все страницы в Drawer имеют одинаковый заголовок (кроме заголовка).

const HomeNavigator = createStackNavigator(
  {
    HomeScreen: { screen: HomeScreen },
    HomeRouter: { screen: HomeRouter }
  },
  {
    initialRoute: 'HomeScreen',
  }); 

HomeRouter - это ящик.

const HomeRouter = createDrawerNavigator(
  {
    Agenda: { screen: Agenda },
    Nieuws: { screen: Nieuws },
    ....
  },
  {
    contentComponent: SideBar,
    drawerWidth: 300,
  }
);

Теперь это дает стандартный заголовок на каждом из экранов в ящике, но это не тот заголовок, который мне нужен. Я хочу настроить это, и это сложно. Я пробовал два подхода:

1. Поместите заголовок в DrawerNavigator. Я не смог найти способ сделать это. Размещение навигационных опций на экране в StackNavigator не имеет никакого эффекта. Я нашел решение здесь: https://stackoverflow.com/a/46808712 (обёртывание с помощью функции withHeader, но это не работает в реакции-навигации версии 2. Это выдает ошибку.

Первый вопрос: почему это не работает?

2. Избавьтесь от заголовка на HomeRouter и разместите заголовки на каждом из экранов в ящике. Чтобы это работало, эти экраны должны быть обернуты в StackNavigator. Этот подход работает, но он требует стандартного кода на каждом экране, что нарушает принцип СУХОГО.

В основном код становится:

const HomeNavigator = createStackNavigator(
  {
    HomeScreen: { screen: HomeScreen },
    HomeRouter: { screen: HomeRouter,
                  navigationOptions: () => ({
                    header: null
                  })
                }
  },
  {
    initialRoute: 'HomeScreen',
  }); 

, а затем в HomeRouter:

const wrap = (name, screen) => {
  return(
    createStackNavigator({
      [name]: { screen: screen }
    })
  );
};

const HomeRouter = createDrawerNavigator(
  {
    Agenda: { screen: wrap('Agenda', Agenda)},
    ...

Экраны определяют собственный заголовок:

class Agenda extends Component {
  static navigationOptions = () => ({
    header: (
      <MenuHeader title="Agenda" />
    )
  });

  render() { .....

Это решение работает, но сейчас я пытаюсь выделить код заголовка и поместить его в функцию-обертку.

Я попытался поместить навигационные опции как свойство на экран Agenda. Это работает, если я делаю это, где я определяю компонент:

class Agenda extends Component {
  static navigationOptions = () => ({
    header: (
      <MenuHeader title="Agenda" />
    )
  });

  render() { ...
}

Agenda.navigationOptions = () => ({
    header: (
      <MenuHeader title="Agenda" />
    )
  });

export default Agenda;

Это решение работает. Но все еще использует стандартный код. Поэтому я хочу установить свойство navigationOptions для функции-оболочки. Но тогда я получаю ошибку:

Этот код не работает:

import Agenda from '../Pages/Agenda';

Agenda.navigationOptions = () => ({
        header: (
          <MenuHeader title="Agenda" />
        )
      });

Это приводит к ошибке "Инвариантное нарушение. Тип элемента недопустим: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: undefined."

Второй вопрос: Так почему же он работает при применении до экспорта, а не после импорта? Разве импортированный компонент не совпадает с экспортированным? Я также попробовал это с именованным экспортом / импортом, но это не имеет значения.