Навигация не работает в функции

Question

У меня есть функция для входа через Facebook с использованием response-native-fbsdk:

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 свои функции, либо использовать функции стрелок . Если 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);
    }
  );
}

С лямбда

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