React Navigation 在 React Native App 中无法与 Firebase 一起使用答案

【问题标题】：React Navigation not working with Firebase in React Native AppReact Navigation 在 React Native App 中无法与 Firebase 一起使用
【发布时间】：2020-03-21 16:55:47
【问题描述】：

我有一个有趣的问题。

当我按下注册按钮时，注册组件中会调用下面的函数。

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

【问题讨论】：

标签： firebase react-native react-navigation react-navigation-v5

【解决方案1】：

这不是 Firebase 的问题。您遇到的问题是从承诺返回后执行的箭头函数中访问导航引用。 this 的作用域与该箭头函数的作用域不同。

要解决像 React Navigation has a solution 这样的情况，您可以定义一个函数来直接调用导航。

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

这不是在任何地方普遍使用的原因是，当您有复杂的嵌套路线时，它可能会出现问题，而且它也不允许您访问其他导航方法，但对于像您这样的情况，它可以正常工作。

【讨论】：

【解决方案2】：

'this' 表示上下文，它是反应中最有趣的事情。尝试使用 console.log(this.props) 检查 firebase 中的 props 是否与另一个示例相同。由于 this 是从 Promise 内部调用的，因此它可能会更改“this”上下文。它发生的次数比预期的要多。

你可以尝试创建一个函数

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

【讨论】：

运气不好。我仍然遇到同样的问题。为什么我们要在这里创建一个单独的导航函数呢？
创建单独的函数来绑定上下文。我的问题就是这样解决的。 console.log(this.props) 显示了什么？
我已经在上面的问题中添加了输出。

【解决方案3】：

从调用注册函数的任何位置将 this 作为参数传递，并使用该参数代替 this。

【讨论】：

【解决方案4】：

确保在导航之前卸载 FirebaseRecaptcha.FirebaseRecaptchaVerifierModal

【讨论】：