Навигация React не работает с Firebase в приложении React Native

Question

У меня странная проблема.

Когда я нажимаю кнопку регистрации, в компоненте SignUp вызывается указанная ниже функция.

//SignUp.js
signUpHandler = () => {
        if (this.state.email == '' || this.state.password == '') {
            alert("Email or Password is empty.")
        }
        else {
            firebase.auth().createUserWithEmailAndPassword(this.state.email, this.state.password)
                .then(() => this.props.navigation.navigate('ExtendedRegisteration'))
                .catch(error => { alert(error.message) });
        }
    }

Теперь это не приводит к переходу к ExtendedRegistate. "но когда я делаю ниже, он перемещается очень хорошо.

//SignUp.js
signUpHandler = () => {
        if (this.state.email == '' || this.state.password == '') {
            alert("Email or Password is empty.")
        }
        else {
                this.props.navigation.navigate('ExtendedRegisteration')
        }
    }

Это проблема с Firebase? Мне нужно перейти к «ExtendedRegisstruction» после того, как я зарегистрируюсь с помощью firebase.

Вывод из this.props в signUpHandler:

Object {
  "navigation": Object {
    "addListener": [Function addListener],
    "canGoBack": [Function canGoBack],
    "dangerouslyGetParent": [Function dangerouslyGetParent],
    "dangerouslyGetState": [Function anonymous],
    "dispatch": [Function dispatch],
    "goBack": [Function anonymous],
    "isFocused": [Function isFocused],
    "jumpTo": [Function anonymous],
    "navigate": [Function anonymous],
    "pop": [Function anonymous],
    "popToTop": [Function anonymous],
    "push": [Function anonymous],
    "removeListener": [Function removeListener],
    "replace": [Function anonymous],
    "reset": [Function anonymous],
    "setOptions": [Function setOptions],
    "setParams": [Function anonymous],
  },
  "route": Object {
    "key": "Sign Up-q-zIoH0VCp",
    "name": "Sign Up",
    "params": undefined,
  },
}

Answer 1

Передайте это как параметр, откуда бы вы ни вызывали функцию регистрации, и используйте этот параметр вместо этого.

Answer 2

«это» означает контекст, и это самая забавная вещь в реакции. Попробуйте console.log (this.props), чтобы проверить, совпадают ли реквизиты в firebase с другим примером. Так как это было вызвано из обещания, оно могло изменить контекст «это». Это происходит чаще, чем ожидалось.

Вы можете попробовать создать функцию

constructor(props){
    super(props);
    this._onUserCreation = this._onUserCreation.bind(this);
}

_onUserCreation=()=>{this.props.navigation.navigate('ExtendedRegisteration')};

//SignUp.js
signUpHandler = () => {
        if (this.state.email == '' || this.state.password == '') {
            alert("Email or Password is empty.")
        }
        else {
            firebase.auth().createUserWithEmailAndPassword(this.state.email, this.state.password)
                .then(() => this._onUserCreation())
                .catch(error => { alert(error.message) });
        }
    }