So integrieren Sie Firebase in wenigen Minuten in eine React Native Expo-App

Firebase, eine leistungsstarke Backend-as-a-Service-Plattform, bietet einen umfassenden Satz an Tools für Benutzerauthentifizierung, Echtzeitdatenbanken, Analysen und mehr. Die Integration von Firebase in Ihre mit Expo erstellte React Native-App ist eine schnelle und effiziente Möglichkeit, Ihre Anwendung mit Funktionen wie sicherer Authentifizierung und Echtzeit-Datensynchronisierung zu erweitern.

Diese Anleitung zeigt, wie Sie Firebase in weniger als 5 Minuten in ein Expo React Native-Projekt integrieren. Wir behandeln die Einrichtung von Firebase, die Implementierung der Firebase-Authentifizierung für die Benutzeranmeldung und -registrierung sowie die Verwendung der Echtzeitdatenbank für die Datenverwaltung.

Voraussetzungen

Bevor Sie beginnen, stellen Sie sicher, dass Sie Folgendes haben:

1. Node.js installiert.
2. Ein bestehendes Expo-Projekt (erstellen Sie bei Bedarf eines mit expo init).
3. Ein Firebase-Konto und -Projekt (erstellen Sie bei Bedarf eines in der Firebase-Konsole).
4. Das Expo Firebase SDK ist installiert (expo install firebase).

Schritt 1: Installieren Sie das Firebase SDK

Nutzen Sie den optimierten Installationsprozess von Expo: Navigieren Sie in Ihrem Terminal zu Ihrem Expo-Projektverzeichnis und führen Sie Folgendes aus:

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

Dadurch wird das erforderliche Firebase SDK installiert.

Schritt 2: Konfiguration der Firebase-Konsole

1. Auf die Firebase-Konsole zugreifen: Gehen Sie zur Firebase-Konsole.
2. Erstellen Sie ein Projekt (falls erforderlich): Erstellen Sie ein neues Firebase-Projekt, falls Sie dies noch nicht getan haben.
3. Firebase zu Ihrer App hinzufügen: Da Expo einen webbasierten Ansatz verwendet, konfigurieren Sie Ihr Projekt als Web-App in der Firebase-Konsole. Kopieren Sie das generierte Firebase-Konfigurationsobjekt. Es wird ungefähr so ​​aussehen:

<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>

Schritt 3: Integrieren Sie Firebase in Ihre React Native App

Fügen Sie Ihre Firebase-Konfiguration in Ihren App.js (oder Haupt-App-Einstiegspunkt) ein und initialisieren Sie 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>

Dadurch wird Firebase mit Ihrer Konfiguration initialisiert. Die folgenden Abschnitte fügen Authentifizierungs- und Datenbankfunktionen hinzu.

Schritt 4: Verwendung der Firebase-Echtzeitdatenbank (optional)

Die Echtzeitdatenbank von Firebase bietet Client-übergreifende Datensynchronisierung in Echtzeit. So fügen Sie grundlegende Lese-/Schreibfunktionen hinzu:

Importieren Sie zunächst das Datenbankmodul:

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

Dann fügen Sie Funktionen zum Schreiben und Lesen von Daten hinzu:

<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>

Schritt 5: Führen Sie Ihre Anwendung aus

Wenn Firebase integriert ist, führen Sie Ihre Expo-App aus mit:

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

Scannen Sie den QR-Code mit Expo Go, um die Benutzerregistrierung, Anmeldung und Datenpersistenz zu testen.

Fazit

Sie haben Firebase erfolgreich in Ihre Expo React Native-App integriert! Dies bietet eine solide Grundlage für die Erstellung funktionsreicher Anwendungen, die die Authentifizierungs- und Echtzeit-Datenbankfunktionen von Firebase nutzen. Entdecken Sie die anderen Dienste von Firebase (Push-Benachrichtigungen, Cloud-Speicher usw.), um Ihre App weiter zu verbessern.

Das obige ist der detaillierte Inhalt vonSo integrieren Sie Firebase in wenigen Minuten in eine React Native Expo-App. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!