如何在幾分鐘內將 Firebase 與 React Native Expo 應用程式集成

Firebase 是一個強大的後端即服務平台，提供了一整套用於使用者身份驗證、即時資料庫、分析等的工具。 將 Firebase 整合到使用 Expo 建置的 React Native 應用程式中是一種快速有效的方法，可透過安全身份驗證和即時資料同步等功能來增強應用程式。

本指南示範如何在 5 分鐘內將 Firebase 整合到 Expo React Native 專案中。我們將介紹如何設定 Firebase、為使用者登入和註冊實施 Firebase 身份驗證以及使用即時資料庫進行資料管理。

先決條件

開始之前，請確保您擁有：

1. Node.js 已安裝。
2. 現有的 Expo 項目（如果需要，使用 expo init 建立一個）。
3. 一個 Firebase 帳戶和項目（如有必要，請在 Firebase 控制台建立一個）。
4. 已安裝 Expo Firebase SDK (expo install firebase)。

第 1 步：安裝 Firebase SDK

使用 Expo 的簡化安裝過程：導航到終端機中的 Expo 專案目錄並運行：

<code class="language-bash">expo install firebase</code>

這將安裝所需的 Firebase SDK。

第 2 步：Firebase 控制台設定

1. 存取 Firebase 控制台： 前往 Firebase 控制台。
2. 建立專案（如果需要）： 建立新的 Firebase 專案（如果您尚未建立）。
3. 將 Firebase 新增至您的應用程式：由於 Expo 使用基於 Web 的方法，因此請在 Firebase 控制台中將您的專案配置為 Web 應用。 複製產生的 Firebase 配置物件。 它看起來類似：

<code class="language-javascript">const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID",
};</code>

第 3 步：將 Firebase 整合到您的 React Native 應用中

將 Firebase 設定貼到 App.js（或主套用入口點）並初始化 Firebase：

<code class="language-javascript">import React, { useState } from 'react';
import { TextInput, Button, View, Text } from 'react-native';
import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/database';

// Your Firebase config object (from Step 2)
const firebaseConfig = { /* ... */ };

// Initialize Firebase
if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
} else {
  firebase.app(); 
}

// ... rest of your app code (see below for authentication and database examples)</code>

這將使用您的設定初始化 Firebase。 以下部分新增身份驗證和資料庫功能。

第 4 步：使用 Firebase 即時資料庫（選購）

Firebase 的即時資料庫提供跨客戶端的即時資料同步。 以下是增加基本讀/寫功能的方法：

先導入資料庫模組：

<code class="language-javascript">import 'firebase/database';</code>

然後，新增寫入和讀取資料的函數：

<code class="language-javascript">const writeData = () => {
  firebase.database().ref('/users/1').set({
    name: 'John Doe',
    email: email,
  }).then(() => {
    alert('Data saved!');
  }).catch(error => alert(error.message));
};

const readData = () => {
  firebase.database().ref('/users/1').once('value')
    .then(snapshot => {
      const data = snapshot.val();
      alert('User data: ' + JSON.stringify(data));
    })
    .catch(error => alert(error.message));
};</code>

第 5 步：執行您的應用程式

整合 Firebase 後，使用以下命令執行您的 Expo 應用程式：

<code class="language-bash">expo start</code>

使用Expo Go掃描二維碼來測試使用者註冊、登入和資料持久化。

結論

您已成功將 Firebase 整合到您的 Expo React Native 應用中！ 這為利用 Firebase 的身份驗證和即時資料庫功能建立功能豐富的應用程式奠定了堅實的基礎。 探索 Firebase 的其他服務（推播通知、雲端儲存等）以進一步增強您的應用程式。

以上是如何在幾分鐘內將 Firebase 與 React Native Expo 應用程式集成的詳細內容。更多資訊請關注PHP中文網其他相關文章！