时间戳

首页 > 解决方案 > 在 React Native 项目结构中指定 Firebase 内容的位置

reactjs - 在 React Native 项目结构中指定 Firebase 内容的位置

问题描述

我正在创建反应本机应用程序，并且必须在其中使用 firebase 数据库。

所以，我通过 firebase 控制台，对于 react-native 开发，我选择了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 东西？

谢谢。

标签： reactjsreact-nativefirebase-realtime-databasereact-native-androidreact-native-ios

解决方案

从我在这里遵循的一个不错的教程中，我已经这样做了：

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;

推荐阅读