iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 27
0
Mobile Development

30天用React native製作app!!系列 第 27

[蚊子的Day27]Firebase使用-App端的設定~React Native

!重要提醒!
開始使用Firebase之前一定要先存好一份備份或是使用git喔!安裝完Firebase後有可能會因為不知名的原因程式整個crash掉,我第一次安裝Firebase有發生這件事,後來我是把node_modules整個資料夾刪掉,然後用git回復前一個版本的package.json與package-lock.json檔並重新install,最後再安裝一次Firebase SDK才成功,幸好有存git,專案壞掉真的很可怕誒QAQ~

安裝Firebase SDK

要在React Native使用Firebase得先安裝好它的SDK,呼叫出VScode的控制台輸入:

npm install --save firebase

設定FirebaseConfig

打開App.js檔案後匯入Firebase模組並初始化Firebase。
*小提醒:firebaseConfig中要填入自己註冊的網頁應用程式的Firebase configuration喔!

import * as firebase from "firebase";

  useEffect(() => {
    const firebaseConfig = {
      apiKey: "XXXXXXXXXXXXXXXXXXXXXXXX",
      authDomain: "xxxxxx.firebaseapp.com",
      databaseURL: "https://xxxxxx.firebaseio.com",
      projectId: "xxxxxx",
      storageBucket: "xxxxxx.appspot.com",
      messagingSenderId: "00000000000",
      appId: "1:00000000000:web:XXXXXXXXXXXXXXXXXXXXXXXX"
    };
    
    //為避免firebase被重複初始化要加入以下這段程式碼
    if (!firebase.apps.length) {
      firebase.initializeApp(firebaseConfig);
    }
  }, []);

這樣就可以開始使用firebase了,下篇繼續講解firebase的指令~


上一篇
[蚊子的Day26]排行榜的製作-Firebase的使用~React Native
下一篇
[蚊子的Day28]Firebase指令運用-上傳~React Native
系列文
30天用React native製作app!!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言