Drawer Menu doesn't work in react-native

Question

I want to have a drawer menu in my react-native application. so like you see i'm using stack-navigation of react-native in my code to determinate the routes and a DrawerNavigator which is connected to application in screen field of stack!:

const Application = StackNavigator({
    Home: {
   screen: Login,
}
,
 Profile: {
screen: Profile,
}

});

const easyRNRoute = DrawerNavigator({

    Stack: {
          screen: Application
         }
        }, {
contentComponent: DrawerMenu,//<XXXDraw
contentOptions: {
activeTintColor: '#e91e63',
style: {
  flex: 1,
  paddingTop: 15,
} });

i use Application like </Application> in app.js . my DrawerMenu which is pointed by "//

export default class DrawerMenu extends Component {
    render() {
        return (

        <View>
            <Text>Menu</Text>
        </View>

    );
    }
}

and my page -which i want to show menu in that and got problem- contains this codes:

export default class Profile extends React.Component {

    static navigationOptions = { header: null };
    constructor(props) {
        super(props);
        this.state = {
            active: 'Today',
          };
    }


    navigate() {
       this.navigate.navigation.navigate('DrawerOpen'); // open drawer
      }
    render() {
        return (

            <View style={styles.countainer}>

                <Text style={styles.header}>Profile</Text>
                <Button onPress={this.navigate} title="Menu"></Button>

            </View>
        );
    }

}

the problem is this: when i click on the Menu Button. i got this Error:

undefined is not an object (evaluating 'this.props.navigation.navigate')

i tried some codes like : this.props.navigation.navigate('Home'); in component and they are working on but i dont know why it doesn't work on when i take "DrawerOpen" argument in this.navigate.navigation.navigate .

I did some search about that. someones told my remove this.prop in code, but just the error changed to navigation is undefined. i'm stuck in trouble because of this Error. its really lake of obvious tutorial about DrawerMenu in net

Answer 1

您可以使用以下代码：

<Button onPress={() => this.props.navigation.navigate("DrawerOpen")} title="Menu"></Button>

Answer 2

Please read the following:

https://reactjs.org/docs/handling-events.html

A short quote from the website:

You have to be careful about the meaning of this in JSX callbacks. In JavaScript, class methods are not bound by default. If you forget to bind this.handleClick and pass it to onClick, this will be undefined when the function is actually called.

This is not React-specific behavior; it is a part of how functions work in JavaScript. Generally, if you refer to a method without () after it, such as onClick={this.handleClick}, you should bind that method.

Answer 3

在app.js中使用Application的easyRNRoute插入，可能会起作用