2

面白い問題があります。

サインアップボタンを押すと、サインアップコンポーネントで以下の関数が呼び出されます。

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

現在、これは「ExtendedRegisteration」に移動しませんが、以下を実行すると問題なく移動します。

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

これは Firebase の問題ですか? firebase を使用してサインアップした後、「ExtendedRegisteration」に移動する必要があります。

signUpHandler の this.props からの出力:

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,
  },
}
4

4 に答える 4

1

これは Firebase の問題ではありません。あなたが抱えている問題は、約束が戻った後に実行されるアロー関数内からナビゲーション参照にアクセスすることです。のスコープは、thisそのアロー関数内とは異なります。

このような状況を回避するために、React Navigationには、 navigate を直接呼び出す関数を定義できるソリューションがあります。

import { createNavigationContainerRef } from '@react-navigation/native';

export const navigationRef = createNavigationContainerRef()

export function navigate(name, params) {
  if (navigationRef.isReady()) {
    navigationRef.navigate(name, params);
  }
}

その後、そのままインポートnavigateして使用することができます。

navigate('ExtendedRegisteration');

これがどこでも一般的に使用されない理由は、複雑なネストされたルートがある場合に問題になる可能性があり、他のナビゲーション方法にもアクセスできないためですが、あなたのような状況ではうまく機能します.

于 2021-08-02T09:40:00.400 に答える