未定义不是对象（评估“this.props.navigation.navigate”） - 抽屉导航器

Question

我收到了 - undefined 不是一个对象（评估“this.props.navigation.navigate”）。我知道已经有一些关于这个问题的答案，但我没有为 Drawer Navigator 找到任何答案，我只找到了 Stack Navigator。 （我正在使用反应导航 V3） 所以这是我的 DrawerNavigator.js ：

import React from 'react';
import { Platform, Dimensions, Button, View, Text } from 'react-native';
import { createDrawerNavigator, createAppContainer, StackNavigator, withNavigation } from 'react-navigation';
import {Header} from 'react-native-elements';
import Hamburger from 'react-native-animated-hamburger';

class MenuButton1 extends React.Component {
  constructor(props)
  {
      super(props);
      this.state = {
        active: false,
      }

  }
  render () {
    const { navigate } = this.props.navigation;
      return (
          <React.Fragment>   
          <Hamburger active={this.state.active}
     type="cross"
     onPress={() => this.setState({active: !this.state.active}) || navigate('DrawerOpen')} 
     />   
          </React.Fragment>
      )
  }
}


class HomeScreen extends React.Component {
    render() {
      return (
        <React.Fragment>
          <Header
          leftComponent={<MenuButton1 />}
          />

        <View style={{top: 30 }}>
            <Text> Hello </Text>
        </View>
        </React.Fragment>
      );
    }
  }



const WIDTF = Dimensions.get('window').width;

const DrawerConfig = {
    drawerWidth: WIDTF*0.80,
    draertType: 'slide'    
}

const DrawerNavigator = createDrawerNavigator ({
    HomeScreen: {
      screen: HomeScreen,

    }
},
  DrawerConfig
);


export default createAppContainer (DrawerNavigator);

还有我的 App.js：

import React, {Component} from 'react';
import DrawerNavigator from './components/DrawerNavigator';

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

还有问题：

enter image description here

Answer 1

导航对象仅在作为抽屉导航器的直接子级的屏幕上可用

您可以用withNavigation 包装您的MenuButton1 以访问导航对象...或者简单地将您的导航逻辑包装在一个方法中并将其作为道具传递给您的MenuButton，例如：

class MenuButton1 extends React.Component {
  constructor(props) {
    // ...
  }

  render() {
    const { onDrawerOpen } = this.props;
    return (
      <React.Fragment>
        <Hamburger
          active={this.state.active}
          type="cross"
          onPress={() => this.setState({ active: !this.state.active }) || onDrawerOpen()
          }
        />
      </React.Fragment>
    );
  }
}

-

class HomeScreen extends React.Component {
  render() {
    return (
      <React.Fragment>
        <Header
          leftComponent={(
            <MenuButton1
              onDrawerOpen={() => this.props.navigation.openDrawer()}
            />
)}
        />

        <View style={{ top: 30 }}>
          <Text> Hello </Text>
        </View>
      </React.Fragment>
    );
  }
}