DrawerNavigator - 无法在 StackNavigator 路由中打开 DrawerNavigator

Question

最近我在 StackNavigator 中的一个简单的 DrawerNavigator 上遇到了问题。 我的目标是当我点击 StackNavigator 标题上的 BurgerMenu 图标时，同时获得 StackNavigator 的返回功能和 DrawerNavigator 侧边菜单。

这是我当前的代码

import React, { Component } from 'react';
import { TouchableHighlight } from 'react-native';
import SvgUri from 'react-native-svg-uri';
import { StackNavigator } from 'react-navigation'; 
import { DrawerNavigator } from "react-navigation";
import SideBar from './SideBar';
import Screen1 from './Screen1';
import Screen2 from './Screen2';
import Screen3 from './Screen3';

export default class App extends React.Component {
  render() {
    return <StackNav />;
  }
}

class BurgerMenu extends React.Component {
  render() {
    return (
                  <TouchableHighlight 
                    onPress={() => this.props.navigation.navigate("DrawerOpen")}>
                    <SvgUri
                      width="30"
                      height="30"
                      source={require("Project_01/app/images/menu.svg")}
                    />
                  </TouchableHighlight>
    );
  }
}

const DrawerNav = DrawerNavigator(
  {
    Screen1: { screen: Screen1 }
  },
  {
    contentComponent: props => <SideBar {...props} />
  }
);

const StackNav = StackNavigator(
  {
    Screen1: {
      screen: DrawerNav,
    },
    Screen2: {
      screen: Screen2,
    },
    Screen3: {
      screen: Screen3,
    },
  },
  {
    initialRouteName: 'DrawerNav',
    navigationOptions: {
      headerRight: <BurgerMenu /> ,
      title: "Header"
    },
  },
);

如您所见，我将带有 BurgerMenu 组件的 headerRight 添加到 StackNavigator 中的 navigationOptions。

在 BurgerMenu 类中，我使用“ onPress={() => this.props.navigation.navigate("DrawerOpen")}> ”添加了 TouchableHighlight，我的意思是打开 DrawerNavigator。

不幸的是，当我按下它时，我收到一条错误消息，上面写着“未定义不是对象（正在评估'e.props.navigation.navigate'）。

谁能帮帮我

Answer 1

尝试改变这个：

    navigationOptions: {
      headerRight: <BurgerMenu /> ,
      title: "Header"
    },

通过这个：

  navigationOptions: ({navigation}) => ({
    headerRight: <BurgerMenu navigation={navigation} />,
    title: "Header"
  }),

你也可以参考我的github上的这个example。