undefined 不是一个对象(评估'this.props.navigation')反应导航 [英] undefined is not an object (evaluating 'this.props.navigation') react navigation

问题描述

我在 React Native App 中使用 React Stack Navigator.我的导航道具有问题.

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,
    },
});

还有我的 App.js

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. :/

推荐答案

您需要在构造函数中使用 bind 或使用 fat arrow 函数来绑定引用将 this 引用到 context

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");
}

或

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

你也可以查看这个 文章

这篇关于undefined 不是一个对象(评估'this.props.navigation')反应导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！