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课程中，我添加了TouchableHighlight＆＃34; onPress = {（）=＆gt; this.props.navigation.navigate（＃34＆; DrawerOpen＆＃34;）}＆GT; ＆＃34;我的意思是打开DrawerNavigator。

不幸的是，当我按下它时，我收到一条错误消息说＆＃34; undefined不是一个对象（评估＆＃39; e.props.navigation.navigate＆＃39;）。

有人可以帮助我吗

Answer 1

尝试更改此内容：

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

由此：

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

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

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

1 个答案: