Question

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

2019-06-06

248

reactjs react-native navigation

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

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="转到登录" 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)。我认为是因为您在承诺中创建了一个新函数，所以 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()); } };