Expo에서 Firebase 사용하기 : Firebase 설정을 올바르게 설정하고 테스트하는 방법은 무엇입니까?

Question

나는 firebase에 저장할 수있는 아주 간단한 엑스포 반응 네이티브 프로젝트를하려고합니다. https://docs.expo.io/versions/latest/guides/using-firebase.html

1 단계 : 여기에 가이드에 따라

어떻게 올바르게 이러한 값을 설정하는 방법? 어디에서 찾을 수 있습니까?

const firebaseConfig = { 
    apiKey: "<YOUR-API-KEY>", 
    authDomain: "<YOUR-AUTH-DOMAIN>", 
    databaseURL: "<YOUR-DATABASE-URL>", 
    storageBucket: "<YOUR-STORAGE-BUCKET>" 
}; 

나는 1 단계에 대한 정확한 정보를 파악하는데 어려움이 있었다, 그래서 내가 몇 가지 지침을 공유하고 생각하고, 코드는 쉽게 2 단계를 테스트합니다.

Answer 1

필드 옆의 숫자를 사용하여 각 값을 어디에서 찾을 수 있는지 알려주고 테스트 할 코드를 제공합니다.

const firebaseConfig = { 
    projectId: "", // 0 
    apiKey: "", // 1 
    authDomain: "", // 2 
    databaseURL: "", // 3 
    storageBucket: "", // 4 
    messagingSenderId: "", // 5 
}; 

다음 단계의 모든

은 (프로젝트 here를 열어 도달 할 수있다) 프로젝트 메인 페이지에서 시작합니다.
0
, 1 :
projectId 및 apiKey에 모두 옆 개요 탭에 기어 아이콘을 클릭하여 찾을 수 있습니다 는 다음 프로젝트는을 설정을 선택합니다. 일반 탭에는 프로젝트 ID 및 웹 API가 표시됩니다.

2 :
authDomain는 <projectId> .firebaseapp.com입니다.

3 :
databaseURL는 데이터베이스 탭을 클릭하여 확인할 수 있습니다. https : // <projectId> .firebaseio.com /이어야합니다.

4 :
storageBucket는 저장 탭을 클릭하여 확인할 수 있습니다. 다음과 같아야합니다 : gs : // <projectId> .appspot.com /.

5 :
messagingSenderId 옆 개요 탭에 기어 아이콘을 클릭하여 찾을 수는 는 다음 프로젝트는을 설정을 선택합니다. 클라우드 메시징 탭에는 보낸 사람 ID가 표시됩니다. 이 모두 적절하게 설정 한 후

---

, 다음과 같은 코드로 테스트 할 수

import React from 'react'; 
import { StyleSheet, View, Button } from 'react-native'; 
import * as firebase from 'firebase'; 

// Initialize Firebase 
const firebaseConfig = { 
    // ... 
}; 
firebase.initializeApp(firebaseConfig); 

export default class App extends React.Component { 
    render() { 
    return (
     <View style={styles.container}> 
     <Button 
      onPress={() => updateDB(1, 10, 20)} 
      title="Update DB on Firebase" 
     /> 
     </View> 

    ); 
    } 
} 

function updateDB(userID, fieldValue1, fieldValue2) { 
    firebase.database().ref(userID).set({ 
    field1: fieldValue1, 
    field2: fieldValue2, 
    }); 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    backgroundColor: '#fff', 
    alignItems: 'center', 
    justifyContent: 'center', 
    }, 
});