导航在功能中不起作用

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。

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

在模拟器上，出现黄色信息：

TypeError: undefined is not a function (evaluating 'this.props.navigation')

alert('Login ok')有效，但this.props.navigation.navigate('ListaUf')无效。

Answer 1

您正在失去 this 的上下文。您需要 bind your functions or use 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);
    }
  );
}

Answer 2

您是否尝试过在导航栏周围添加大括号

导出默认值（{导航}）=>

导航在功能中不起作用

The navigation not work in a function

react-native

react-native-fbsdk

react-navigation