Firebase 是一個(gè)強(qiáng)大的後端即服務(wù)平臺(tái)，提供了一整套用於使用者身份驗(yàn)證、即時(shí)資料庫(kù)、分析等的工具。 將 Firebase 整合到使用 Expo 建置的 React Native 應(yīng)用程式中是一種快速有效的方法，可透過(guò)安全身份驗(yàn)證和即時(shí)資料同步等功能來(lái)增強(qiáng)應(yīng)用程式。

本指南示範(fàn)如何在 5 分鐘內(nèi)將 Firebase 整合到 Expo React Native 專案中。我們將介紹如何設(shè)定 Firebase、為使用者登入和註冊(cè)實(shí)施 Firebase 身份驗(yàn)證以及使用即時(shí)資料庫(kù)進(jìn)行資料管理。

先決條件

開(kāi)始之前，請(qǐng)確保您擁有：

1. Node.js 已安裝。
2. 現(xiàn)有的 Expo 項(xiàng)目（如果需要，使用 expo init 建立一個(gè)）。
3. 一個(gè) Firebase 帳戶和項(xiàng)目（如有必要，請(qǐng)?jiān)?Firebase 控制臺(tái)建立一個(gè)）。
4. 已安裝 Expo Firebase SDK (expo install firebase)。

第 1 步：安裝 Firebase SDK

使用 Expo 的簡(jiǎn)化安裝過(guò)程：導(dǎo)航到終端機(jī)中的 Expo 專案目錄並運(yùn)行：

expo install firebase

這將安裝所需的 Firebase SDK。

第 2 步：Firebase 控制臺(tái)設(shè)定

1. 存取 Firebase 控制臺(tái)： 前往 Firebase 控制臺(tái)。
2. 建立專案（如果需要）： 建立新的 Firebase 專案（如果您尚未建立）。
3. 將 Firebase 新增至您的應(yīng)用程式：由於 Expo 使用基於 Web 的方法，因此請(qǐng)?jiān)?Firebase 控制臺(tái)中將您的專案配置為 Web 應(yīng)用。 複製產(chǎn)生的 Firebase 配置物件。 它看起來(lái)類似：

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",
};

第 3 步：將 Firebase 整合到您的 React Native 應(yīng)用中

將 Firebase 設(shè)定貼到 App.js（或主套用入口點(diǎn)）並初始化 Firebase：

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)

這將使用您的設(shè)定初始化 Firebase。 以下部分新增身份驗(yàn)證和資料庫(kù)功能。

第 4 步：使用 Firebase 即時(shí)資料庫(kù)（選購(gòu)）

Firebase 的即時(shí)資料庫(kù)提供跨客戶端的即時(shí)資料同步。 以下是增加基本讀/寫(xiě)功能的方法：

先導(dǎo)入資料庫(kù)模組：

import 'firebase/database';

然後，新增寫(xiě)入和讀取資料的函數(shù)：

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));
};

第 5 步：執(zhí)行您的應(yīng)用程式

整合 Firebase 後，使用以下命令執(zhí)行您的 Expo 應(yīng)用程式：

expo start

使用Expo Go掃描二維碼來(lái)測(cè)試使用者註冊(cè)、登入和資料持久化。

結(jié)論

您已成功將 Firebase 整合到您的 Expo React Native 應(yīng)用中！ 這為利用 Firebase 的身份驗(yàn)證和即時(shí)資料庫(kù)功能建立功能豐富的應(yīng)用程式奠定了堅(jiān)實(shí)的基礎(chǔ)。 探索 Firebase 的其他服務(wù)（推播通知、雲(yún)端儲(chǔ)存等）以進(jìn)一步增強(qiáng)您的應(yīng)用程式。

以上是如何在幾分鐘內(nèi)將 Firebase 與 React Native Expo 應(yīng)用程式集成的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！