Где указывать материалы Firebase в структуре проекта 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 для разработки.

Я запутался, где я могу добавить эти вышеупомянутые материалы firebase в мою собственную структуру проекта React?

Спасибо.

Может быть, этот сайт может вам помочь? rnfirebase.io

Sebastian Berglönn 22.08.2018 12:28
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
1
39
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Из хорошего туто, за которым я следил за здесь, я сделал следующее:

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;

Другие вопросы по теме