React native 在react导航中将标题放在抽屉上时出现问题

我正在尝试在react导航中获取抽屉导航器的标题。我在StackNavigator中有一个DrawerNavigator，抽屉中的所有页面都有类似的标题（标题除外）

家庭路由器

是抽屉

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

现在，在抽屉中的每个屏幕上都有一个标准的标题，但这不是我想要的标题。我想定制它，这很难。 我尝试了两种方法：

将收割台放在抽屉上。我一直没能找到一个方法来做到这一点。在StackNavigator的屏幕中放置navigationOptions没有任何效果。我在这里找到了一个解决方案：（使用

withHeader

函数包装，但在react navigation版本2中不起作用。它给出了一个错误

第一个问题：为什么这不起作用？

去掉HomeRouter上的标题，并将标题放在抽屉中的每个屏幕上。为了实现这一点，这些屏幕必须包装在StackNavigator中。这种方法可行，但它需要在每个屏幕中使用样板代码，这违反了DRY原则

基本上，代码变成：

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

然后在

家庭路由器中

：

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() { .....

此解决方案有效。但仍使用样板代码。因此，我希望包装函数设置属性

navigationOptions

。但是，我得到一个错误：

此代码失败：

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

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

从“../Pages/Agenda”导入议程；
议程.导航选项=（）=>({
标题：(
)
});

这会出现错误“不变冲突。元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。”

第二个问题：为什么它在导出之前应用时有效，而在导入之后无效？导入的组件与导出的组件不一样吗？我也尝试了命名的导出/导入，但没有什么区别。

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

  render() { ...
}

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

export default Agenda;

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

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