为什么 firebase 无法识别我的 firebase 实例？ “调用 Firebase App.initializeApp()”答案

【问题标题】：Why does firebase not recognize my firebase instance? "call Firebase App.intializeApp()"为什么 firebase 无法识别我的 firebase 实例？ “调用 Firebase App.initializeApp()”
【发布时间】：2018-05-03 21:36:36
【问题描述】：

我有两个文件，一个 App.js 用于设置我的 React Navigation StackNavigator 以及我的 firebase 实例，另一个Login.js 用于登录用户。

我正在尝试检测用户是否已经登录（通过 firebase 持久登录），但由于某种原因，Login.js 的 componentDidMount() 中未检测到我的 firebase 实例。这对我来说没有意义，因为在我的 Login.js 的其他地方，我在我的 firebase 实例上调用 fxns，例如使用 Google 登录。

我应该如何安排 firebase 初始化/身份验证检查以确保正确检测到 firebase 实例以及持久身份验证检查？

我已经看过这个question，但那个人似乎有不同的问题，因为他们只关心单个文件中的firebase实例。

App.js的相关部分

import { StackNavigator } from 'react-navigation';
import * as firebase from 'firebase';
import 'firebase/firestore';
import Login from './components/login';

const Application = StackNavigator({
    Login: { screen: Login,
        navigationOptions: {
                title: 'Login',
        }
    },
    SignUp: { screen: SignUp,
        navigationOptions: {
           title: 'Signup',
         }
    },
    Home: { screen: Home,
        navigationOptions: {
           title: 'Home'
       }
    },
});

const firebaseConfig = {
    apiKey: "APIKEY",
    authDomain: "AUTH_DOMAIN",
    databaseURL: "DATABASE_URL",
    projectId: "PROJECT_ID",
    storageBucket: "BUCKET",
}

export default class App extends React.Component {
    componentDidMount(){
        //if no instance exists, initialize one
        if (!firebase.apps.length) {
            firebase.initializeApp(firebaseConfig);
        }
    }
    render() {
        return (
            <Application/>
        );
    }
}

Login.js的相关部分

import * as firebase from 'firebase';
import Home from './home';

export default class Login extends React.Component {

    constructor(props){
        super(props)
        this.state = {
            isLoggingIn: true,
            authFlag: false,
        }
    }

    componentDidMount() {
        //error is on the following line
        firebase.auth().onAuthStateChanged((user) => {
            if(!this.state.authFlag){
                this.setState({ authFlag: true })
                //persistent success, take user to Home
                if(user){
                     this.props.navigation.navigate('Home');
                     return;
                }

                //user hasn't logged in before, must log in
                else{
                     this.setState({isLoggingIn: false});
                     return;
                }
            }
        });
    }
}

【问题讨论】：

子组件在其父组件之前安装。您的登录组件的componentDidMount 发生在您的应用程序的componentDidMount 之前.....stackoverflow.com/questions/32814970/…
我明白了。我无法理解这如何与 React-Native 中的 parent->child 数据流兼容。如果子组件在其父组件之前挂载，是否不否认在父组件中初始化的数据能够流向其子组件（如我的情况）？
这取决于您如何获取数据。如果您在componentDidMount 中获取数据，那么您应该在父级中进行。然后父级可以将数据向下传递给其子级，子级将在componentWillReceiveProps 中接收数据。至少在 React 17 之前...
假设有一个导航器App.js -> Login.js -> Home.js，这意味着将在Home.js中初始化他们的firebase实例？？如何重构我发布的代码以在App.js 中对其进行初始化并允许Login.js 的componentDidMount() 访问它？

标签： javascript firebase react-native firebase-authentication react-navigation

【解决方案1】：

正如我在上面的 cmets 中提到的，子组件在其父组件之前安装。您的登录组件的componentDidMount 发生在您的应用程序的componentDidMount 之前。 Stack overflow question outlining the deets.

只是进行快速搜索，看起来大多数人在他们的组件之外使用firebase.initializeApp。 Was just reading this.

【讨论】：

哇，你最后链接的指南很棒，非常感谢！