导航在功能中不起作用

Question

我有一个使用react-native-fbsdk登录facebook的功能：

handleFacebookLogin () {
LoginManager.logInWithReadPermissions(['public_profile']).then(
  function(result) {
    if (result.isCancelled) {
      alert('Login isCancelled');
    } else {
      alert('Login ok')
      this.props.navigation.navigate('ListaUf')
    }
  },
  function(error) {
    alert('Error: ' + error);
  }
);
}

当用户成功登录后，我想导航到下一页，称为ListaUf。

如果我在按钮或this.props.navigation.navigate('ListaUf')中使用componentDidMount，这可以正常工作。

在模拟器上，出现一条黄色消息：

TypeError：undefined不是函数（评估'this.props.navigation'）

alert('Login ok')工作，但this.props.navigation.navigate('ListaUf')不起作用。

Answer 1

你正在失去this的背景。你需要bind你的功能或使用arrow functions。如果用按钮或类似按钮触发handleFacebookLogin，你也需要bind。

有了绑定

handleFacebookLogin () {
  LoginManager.logInWithReadPermissions(['public_profile']).then(
    function(result) {
      if (result.isCancelled) {
        alert('Login isCancelled');
      } else {
        alert('Login ok')
        this.props.navigation.navigate('ListaUf')
      }
    }.bind(this),
    function(error) {
      alert('Error: ' + error);
    }
  );
}

随着lambda

handleFacebookLogin = () => {
  LoginManager.logInWithReadPermissions(['public_profile']).then(
    (result) => {
      if (result.isCancelled) {
        alert('Login isCancelled');
      } else {
        alert('Login ok')
        this.props.navigation.navigate('ListaUf')
      }
    },
    function(error) {
      alert('Error: ' + error);
    }
  );
}