undefined 不是一个对象(评估'this.props.navigation')react导航

IT技术 reactjs react-native react-navigation
2021-05-26 15:54:23

我在 React Native App 中使用 React Stack Navigator。我的导航props有问题。

这是我调用导航方法的组件。

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

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

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

我不明白为什么我在导航方法上有错误。:/

1个回答

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

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

或者

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

你也可以查看这篇文章