Firebase と React Native Expo アプリをすぐに統合する方法

Firebase は、強力なサービスとしてのバックエンド プラットフォームであり、ユーザー認証、リアルタイム データベース、分析などのための包括的なツール セットを提供します。 Expo で構築された React Native アプリに Firebase を統合することは、安全な認証やリアルタイムのデータ同期などの機能でアプリケーションを強化するための迅速かつ効率的な方法です。

このガイドでは、5 分以内に Firebase を Expo React Native プロジェクトに統合する方法を説明します。 Firebase のセットアップ、ユーザーのログインと登録のための Firebase Authentication の実装、データ管理のための Realtime Database の使用について説明します。

前提条件

始める前に、次のものが揃っていることを確認してください。

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 Realtime Database を利用する (オプション)

Firebase の Realtime Database は、クライアント間のリアルタイムのデータ同期を提供します。 基本的な読み取り/書き込み機能を追加する方法は次のとおりです:

まず、データベース モジュールをインポートします。

<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 で QR コードをスキャンして、ユーザーのサインアップ、ログイン、データの永続性をテストします。

結論

これで、Firebase を Expo React Native アプリに統合することができました。 これにより、Firebase の認証機能とリアルタイム データベース機能を活用した機能豊富なアプリケーションを構築するための強固な基盤が提供されます。 Firebase の他のサービス (プッシュ通知、クラウド ストレージなど) を探索して、アプリをさらに強化してください。

以上がFirebase と React Native Expo アプリをすぐに統合する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。