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

问题

I'm using React Stack Navigator in React Native App. I have a problem with the navigation props.

Here is my component where I call my navigate method.

class CommandsList extends React.Component {
    constructor(props){
        super(props);
    }


    addCommand(){
        this.props.navigation.navigate("CreateCommand");
    }
    render() {
        return (
            <SafeAreaView style={{flex:1}}>
                <MyList itemsUrl="http://localhost:9000/commands"/>
                <Button title="Ajouter" onPress={this.addCommand}></Button>
            </SafeAreaView>
        );
    }
}

export default StackNavigator({
    CommandsList : {
        screen : CommandsList,
    },
});

And my App.js

const RootStack = StackNavigator(
    {
        CommandsList: {
            screen: CommandsList,
        },
        CreateCommand: {
            screen: CreateCommand,
        }
    },
    {
        initialRouteName: 'CommandsList'
    }
);

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

I don't understand why I have an error on navigate methods. :/

回答1:

You need to bind your reference either using bind in the constructor or by using the fat arrow function to reference this to the context

addCommand = () => {
        this.props.navigation.navigate("CreateCommand");
}

or

constructor() {
   super()
   this.addCommand = this.addCommand.bind(this);
}

Also you may check this article

来源：https://stackoverflow.com/questions/49856497/undefined-is-not-an-object-evaluating-this-props-navigation-react-navigation