在 React Native 项目结构中指定 Firebase Stuffs 的位置

Question

正在创建 React Native 应用程序并且必须在其中使用 firebase 数据库。

因此，我通过 firebase 控制台进行反应本机开发，我选择 WEB 选项而不是 Android 和 IOS。

所以，我得到如下：

<script src="https://www.gstatic.com/firebasejs/5.4.0/firebase.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "AIzcSyGByfEez587Lor799jeyJRnFYH0z1yu354",
    authDomain: "fir-app-69dcx.firebaseapp.com",
    databaseURL: "https://fir-app-69dcx.firebaseio.com",
    projectId: "fir-app-69dcx",
    storageBucket: "fir-app-69dcx.appspot.com",
    messagingSenderId: "5548741593"
  };
  firebase.initializeApp(config);
</script>

它的意思是： 单击“复制”，然后将代码片段粘贴到您的应用程序中HTML

正在使用 Visual Studio IDE 进行开发。

我很困惑我可以在我的 React 本机项目结构中的什么地方添加上面的 firebase 东西？

谢谢。

Answer 1

我关注了一个很好的教程here我这样做了:

import React, { Component } from 'react';
import { View } from 'react-native';
import firebase from 'firebase';
import { Header, Button, Spinner } from './components/common';
import LoginForm from './components/LoginForm';


class App extends Component {
    state = { loggedIn: null };

    componentWillMount() {
        firebase.initializeApp({
            apiKey: 'stuff',
            authDomain: 'stuff',
            databaseURL: 'stuff',
            projectId: 'stuff',
            storageBucket: 'stuff',
            messagingSenderId: 'stuff'
        });

        firebase.auth().onAuthStateChanged((user) => {
            if (user) {
                this.setState({ loggedIn: true });
            } else {
                this.setState({ loggedIn: false });
            }
        });
    }

    renderContent() {
        switch (this.state.loggedIn) {
            case true:
                return (
                    <View style={{ flexDirection: 'row', paddingTop: 5 }}>
                        <Button onPress={() => firebase.auth().signOut()}>
                            Log out
                        </Button>
                    </View>
                );
            case false:
                return <LoginForm />;
            default:
                return (
                    <View style={{ flexDirection: 'row', paddingTop: 5 }}>
                        <Spinner />
                    </View>
                );
        }
    }

    render() {
        return (
            <View>
                <Header headerText="Authentification" />
                    {this.renderContent()}
            </View>
        );
    }
}

export default App;