Question

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

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,
  }
);

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

将标题放在DrawerNavigator上。我无法找到办法做到这一点。将navigationOptions放在StackNavigator中的屏幕上没有任何效果。我在这里找到了一个解决方案：https://stackoverflow.com/a/46808712（使用withHeader函数包装，但在react-navigation版本2中不起作用。它会出错。

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

摆脱HomeRouter上的标题，并将标题放在抽屉中的每个屏幕上。为了实现这一点，这些屏幕必须包含在StackNavigator中。这种方法有效，但每个屏幕都需要样板代码，违反DRY原则。

基本上代码变为：

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

此解决方案有效，但现在我试图将标头代码分解并将其放入包装函数中。

我尝试将navigationOptions作为属性放在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。” < / p>

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

在反应导航中将标题放在DrawerNavigator上的问题

0 个答案: