Question

创建响应本机应用程序时，必须在其中使用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本机Project结构中的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;

在React Native Project结构中指定Firebase填充的位置

1 个答案: