Question

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

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

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/>;
    }
}

我不明白为什么导航方法出错。：/

Answer 1

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

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

或

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

您也可以查看article

undefined不是一个对象（评估'this.props.navigation'）反应导航

1 个答案: