导航 - 无法读取未定义的属性“导航”

Question

我在登录功能后尝试在“主页”路线上导航，并尝试在登录中集成导航功能，但出现错误“无法读取未定义错误的属性“导航”。

loginUser = (email, password) => {
    try {
        firebase
            .auth()
            .signInWithEmailAndPassword(email, password)
            .then(function(user) {
                this.props.navigation.navigate("Home");
            });
    } catch (error) {
        console.log(error.toString());
    }
};

我也尝试过使用() => this.props.navigation.navigate("Home");，但没有任何反应。

我的路线工作正常，因为如果我用 onPress 功能创建一个简单的按钮，工作正常。

<Button title="Go to Login" onPress={() => this.props.navigation.navigate("Login")} />

你能给我一些提示吗？ react-native 登录成功后如何导航到首页？

提前谢谢你！

Answer 1

当您使用 function() {} 语法而不是箭头函数语法时，您正在更改 this 的词法范围（在 this.props 中）承诺链。

如果您将函数更改为箭头函数，您将保留外部范围，并可以访问 this。

例如

.then((user) => {
   that.props.navigation.navigate("Home");
});

Answer 2

尝试console.log(this)。我想因为你在promise中创建了一个新函数，所以this的范围已经改变了。尝试

loginUser = (email, password) => { let that = this; try { firebase .auth() .signInWithEmailAndPassword(email, password) .then(function(user) { that.props.navigation.navigate("Home"); }); } catch (error) { console.log(error.toString()); } };