Expo im React Native Ecosystem verstehen

React Native Apps sind mit JavaScript gebaut, aber auf native Module für Funktionen wie Kamera, Bluetooth oder GPS angewiesen. Traditionell erforderte das Einrichten dieser nativen Module Android Studio, Xcode, Gradle und CocoaPods - eine steile Lernkurve für Neulinge. Expo abstrahiert diese Komplexität. Es bietet einen verwalteten Workflow, in dem die meisten nativen Funktionen vorkonfiguriert sind, sodass Sie Code schreiben und sofort Ergebnisse sehen können. Expo ist kein separates Framework; Es ist eine Sammlung von Tools -Expo CLI, Expo Go (die Client-App zum Testen) und Expo SDK) (eine Reihe von Bibliotheken, die native APIs umschließen).

Der Hauptunterschied besteht zwischen den verwalteten und baren Workflows innerhalb der Expo. Anfänger beginnen fast immer mit dem verwalteten Workflow, in dem Expo die native Konfiguration übernimmt. Wenn Ihre App wächst, können Sie einen nackten Workflow “auswerfen” (jetzt “expo prebuild” genannt) und die volle Kontrolle über den nativen Code übernehmen. Dieser Pfad stellt sicher, dass Sie nie eingesperrt sind, während Sie trotzdem einen reibungslosen Start genießen.

Warum Expo wichtig für Anfänger (und darüber hinaus)

Vor der Expo haben viele Entwickler Tage damit verbracht, eine React Native-Umgebung zu kompilieren. Häufige Problempunkte waren Versionsfehler zwischen Android-SDKs, die manuelle Verknüpfung nativer Bibliotheken und das Debuggen von kryptischen Build-Fehlern. Expo beseitigt diese Hürden:

  • Null natives Setup: Keine Notwendigkeit, Android Studio oder Xcode zu installieren, um zu starten.
  • Unified SDK: Alle Expo-Bibliotheken sind zusammen versioniert.
  • Over-the-air (OTA) Updates: Push JavaScript ändert sich direkt an die Benutzer, ohne die App Store-Bewertungen zu durchlaufen.
  • Instant sharing: Generieren Sie einen QR-Code, um Ihre App mit Teamkollegen oder Kunden zu teilen.
  • Starke Community und Dokumentation: Die offiziellen Dokumente der Expo gehören zu den besten im Ökosystem von React Native.

Aus diesen Gründen ist die Expo jetzt der empfohlene Ausgangspunkt des React Native-Teams. Die offiziellen React Native-Dokumente führen Anfänger dazu, die Expo zu nutzen, wenn sie neu in der mobilen Entwicklung sind.

Einrichtung Ihrer Expo-Umgebung

Voraussetzungen

  • Node.js (Version 16 oder höher) – downloaden Sie von nodejs.org.
  • Ein code-Editor (VS-Code wird sehr empfohlen).
  • Ein mobiles Gerät mit der installierten Expo Go App (iOS oder Android).
  • (Optional) Ein Expo-Konto zum Veröffentlichen und Teilen – melden Sie sich unter expo.dev an.

Installation von Expo CLI

Expo CLI ist das Kommandozeilen-Tool, mit dem Sie Apps erstellen, ausführen und erstellen.

npm install -g expo-cli

Wenn Sie Yarn verwenden, können Sie stattdessen ausführen, die Installation mit überprüfen. Beachten Sie, dass sich die Expo ab 2024 als Standardstarter in Richtung verschiebt.

npx create-expo-app MyFirstApp --template blank

Dies erstellt ein minimales Projekt mit der neuesten Version von Expo SDK und integrierter Unterstützung für TypeScript, falls gewünscht.

Erkundung der Projektstruktur

Once your project is created, open it in your editor. Key files and directories:

  • App.js (oder App.tsx) – der Einstiegspunkt Ihrer App. Alles, was Sie rendern, beginnt hier.
  • package.json – listet Abhängigkeiten auf (reagieren, reagieren-native, expo und alle Expo-Module, die Sie installieren).
  • app.json – Konfigurationsdatei für Ihr Expo-Projekt (App-Name, Icon, Splash-Bildschirm, Berechtigungen, etc.).
  • node modules – enthält alle installierten Pakete.
  • expo – lokaler Staat für Expo, verpflichten Sie sich nicht zur Versionskontrolle.

Das Schöne an Expo ist, dass Sie keine Android / oder iOS / Ordner sehen, es sei denn, Sie führen FLT: 6 später aus.

Führen Sie Ihre App zum ersten Mal aus

Navigieren Sie zu Ihrem Projektverzeichnis:

cd MyFirstApp

Starten Sie den Entwicklungsserver:

npx expo start

Ein QR-Code erscheint im Terminal (oder eine Webseite öffnet sich mit dem QR-Code). Wichtig: Verwenden Sie auf iOS die Standardkamera-App; Verwenden Sie auf Android die Expo Go-App zum Scannen. Die App wird auf Ihrem Gerät geladen und alle Änderungen, die Sie in Ihrem Code-Editor speichern, werden sofort reflektiert (hot reloading).

Fehlerbehebung bei gemeinsamen Startproblemen

  • Verbindungsprobleme: Stellen Sie sicher, dass sich Ihr Telefon und Ihr Computer im selben WLAN-Netzwerk befinden.
  • Expo Go App zeigt “Unable to find a app”: Dies bedeutet normalerweise, dass der Server noch nicht vollständig gestartet ist. Warten Sie, bis die Protokolle “Metro bundler ready” sagen.
  • Bundler bleibt stecken: Löschen Sie den -Ordner und versuchen Sie , den Cache zu löschen.

Erstellen Sie Ihren ersten Bildschirm: Ein praktisches Beispiel

Lassen Sie uns einen einfachen Bildschirm mit einer Schaltfläche erstellen, die eine Warnung anzeigt. Ersetzen Sie den Inhalt von durch:

import React from 'react';
import { View, Text, Button, Alert, StyleSheet } from 'react-native';

export default function App() {
 const showAlert = () => {
 Alert.alert('Hello!', 'You clicked the button.');
 };

 return (
 <View style={styles.container}>
 <Text style={styles.title}>Welcome to Expo!</Text>
 <Button title="Click Me" onPress={showAlert} />
 </View>
 );
}

const styles = StyleSheet.create({
 container: {
 flex: 1,
 justifyContent: 'center',
 alignItems: 'center',
 backgroundColor: '#f0f0f0',
 },
 title: {
 fontSize: 24,
 marginBottom: 20,
 },
});

Speichern Sie die Datei. Ihr Gerät sollte sofort den Bildschirm anzeigen. Drücken Sie die Taste löst die native Warnung aus. Beachten Sie, dass Sie keinen Java / Kotlin- oder Swift-Code geschrieben haben - Expo hat die Überbrückung übernommen.

Hinzufügen von Navigation mit Expo Router

Die meisten Apps haben mehrere Bildschirme. Expo Router ist die empfohlene Navigationsbibliothek, da sie dateibasiertes Routing verwendet (ähnlich wie Next.js).

Installieren Sie Expo Router

npx expo install expo-router react-native-safe-area-context react-native-screens expo-linking expo-constants

Dann passen Sie Ihren an, um den -Einstiegspunkt auf zu setzen. Erstellen Sie ein -Verzeichnis in Ihrem Projektstamm.

app/
 index.js
 about.js
 _layout.js (optional, for shared layout)

In :

import { Link } from 'expo-router';
import { View, Text } from 'react-native';

export default function Home() {
 return (
 <View>
 <Text>Home Screen</Text>
 <Link href="/about">Go to About</Link>
 </View>
 );
}

Wenn der Benutzer auf den Link tippt, navigiert die App ohne Konfiguration zu Dieses Muster skaliert auf Hunderte von Bildschirmen und ist viel einfacher als herkömmliche React Navigation-Setups.

Zugriff auf Gerätefunktionen mit Expo SDK

Expo bietet über 50 Module für die Funktionalität von Geräten.

Kamera

npx expo install expo-camera

Sie können Berechtigungen anfordern, Fotos machen und Videos aufnehmen.

import { Camera } from 'expo-camera';
// ... request permission with Camera.requestCameraPermissionsAsync()

Standort

npx expo install expo-location

Holen Sie sich die aktuelle Position des Benutzers, beobachten Sie Standortänderungen oder Geocode-Adressen.

Meldungen

npx expo install expo-notifications

Planen und handhaben Sie lokale und Push-Benachrichtigungen. Expo bietet sogar einen Push-Benachrichtigungsdienst an, sodass Sie kein benutzerdefiniertes Backend zum Senden von Token benötigen.

Dateisystem

npx expo install expo-file-system

Lesen, Schreiben und Verwalten von Dateien auf dem Gerät. Nützlich für das Zwischenspeichern von Bildern oder das Herunterladen von Inhalten.

Da diese Module bereits im verwalteten Workflow von Expo verknüpft sind, können Sie sie sofort nach der Installation des npm-Pakets verwenden.

Debuggen und Überprüfen Ihrer App

Debugging ist in Expo einfach. Wenn Sie ausführen, bietet der Metro Bundler ein Entwicklermenü. Auf Ihrem Gerät schütteln Sie es (oder verwenden Sie das On-Screen-Debug-Menü auf Android), um auf Optionen zuzugreifen:

  • Reload – Laden Sie das JavaScript-Bundle neu.
  • Open Inspector – öffnet React DevTools in einem Browser für den Komponenteninspektor.
  • Toggle Remote JS Debugging – ermöglicht das Debuggen in Chrome DevTools (Sie können Haltepunkte in Ihrem JavaScript festlegen).
  • Show Element Inspector – tippen Sie auf UI-Elemente, um ihre Requisiten und Stile zu sehen.

Für Netzwerkanforderungen können Sie Tools wie React Native Debugger oder den integrierten Netzwerkinspektor in Chrome DevTools verwenden, wenn das Remote-Debugging aktiviert ist. Darüber hinaus werden die Protokolle von Expo in dem Terminal angezeigt, in dem Sie den Server gestartet haben, und zeigen Stapelspuren und die Ausgabe von console.log an.

Mit Flipper mit Expo

Wenn Sie den Facebook-Flipper-Debugger bevorzugen, können Sie den bloßen Workflow von Expo so konfigurieren, dass er unterstützt wird, aber für den verwalteten Workflow reichen die eingebauten Tools in der Regel aus. Viele Entwickler verlassen sich bei 90% der Debugging-Aufgaben auf die Entwicklerprotokolle von und React DevTools von Expo.

Managing State in einer Expo App

Expo-Apps sind React Native-Apps, daher funktioniert das State Management genauso.

  • React Context und useReducer für einfachen bis mäßig komplexen Zustand.
  • Zustand oder Jotai für eine leichte, boilerplate-freie Staatsbibliothek.
  • Redux Toolkit für große Apps mit vielen miteinander verbundenen Zustandsscheiben.

Expo bietet keine spezielle Wahl. Für Anfänger wird empfohlen, mit den eingebauten Hooks von React zu beginnen. Sie können später immer zu einer ausgefeilteren Lösung migrieren.

Beispiel mit React Context:

import { createContext, useContext, useState } from 'react';

const ThemeContext = createContext();

export function ThemeProvider({ children }) {
 const [theme, setTheme] = useState('light');
 return (
 <ThemeContext.Provider value={{ theme, setTheme }}>
 {children}
 </ThemeContext.Provider>
 );
}
export const useTheme = () => useContext(ThemeContext);

Testen Sie Ihre App

Expo unterstützt Jest out of the box. Führen Sie aus und konfigurieren Sie Jest in package.json. Sie können Unit-Tests für Ihre Komponenten und Snapshots schreiben. Für End-to-End-Tests funktioniert Detox gut, erfordert aber native Builds. Für einen verwalteten Workflow sollten Sie Maestro in Betracht ziehen – ein mobiles UI-Test-Tool, das mit Expo Go funktioniert.

Beispiel für einen einfachen Test für die Knopfkomponente:

import React from 'react';
import { render, fireEvent } from '@testing-library/react-native';
import App from '../App';

test('button shows alert', () => {
 const { getByText } = render(<App />);
 fireEvent.press(getByText('Click Me'));
 // Assert that Alert was called (use jest.spyOn)
});

Erstellen und Veröffentlichen Ihrer App

Sobald Ihre App fertig ist, sollten Sie sie im App Store und Google Play veröffentlichen. Expo vereinfacht dies mit Cloud-Build-Diensten.

Expo Application Services (EAS)

EAS Build erstellt produktionsbereite native Binärdateien, ohne dass Sie Xcode oder Android Studio installieren müssen.

  1. Installieren Sie :
  2. Einloggen:
  3. Konfigurieren Sie mit Build-Profilen (Entwicklung, Vorschau, Produktion).
  4. [F] oder [F] [F]

EAS baut Ihre App in der Cloud und gibt eine .ipa- oder .apk-Datei zurück. Sie können dann mit an Stores senden.

Over-the-Air Updates

Mit können Sie JavaScript-Updates direkt an die Benutzer senden, ohne sie erneut an die Stores zu senden. Konfigurieren Sie einen Kanal in app.json und führen Sie aus (oder verwenden Sie EAS Update). Die App überprüft beim Start nach Updates und lädt das neueste Bundle herunter. Dies ist ein Spiel-Wechsler, um Fehler schnell zu beheben.

Beispiel App.json Update Config:

{
 "expo": {
 "updates": {
 "url": "https://u.expo.dev/YOUR_PROJECT_ID",
 "enabled": true
 }
 }
}

Grenzen des Managed Workflow

Während Expo ist mächtig, gibt es Szenarien, in denen Sie möglicherweise auswerfen müssen, um einen bloßen workflow:

  • Benutzerdefinierte native Module sind in Expo SDK nicht verfügbar (z. B. eine neue Bluetooth-Bibliothek, die nicht verpackt wurde).
  • Hintergrundaufgaben, die auf unbestimmte Zeit ausgeführt werden müssen (Expo Go und verwaltete Apps haben Einschränkungen bei der Ausführung von Hintergrundinformationen).
  • Push-Benachrichtigungsanpassung über das hinaus, was Expo bietet (z. B. benutzerdefinierte Benachrichtigungssounds oder Rich Media).
  • Große Dateigrößen mit bestimmten nativen Bibliotheken (verwaltete Apps beinhalten das gesamte Expo SDK, das ~20MB hinzufügt).
  • Muss Code vor der App-Initialisierung ausführen (verwaltete Apps haben einen festen Einstiegspunkt).

Glücklicherweise können Sie jederzeit "auswerfen" (eigentlich ausführen. Dadurch werden die und Ordner generiert, sodass Sie nativen Code anpassen können. Sobald Sie dies tun, können Sie die Expo-Tools weiter verwenden, aber die Bequemlichkeit der sofortigen Vorschau mit Expo Go verlieren. Sie können jedoch weiterhin EAS Build und OTA-Updates verwenden.

Best Practices für die Expo Entwicklung

Halten Sie Ihr Expo SDK aktualisiert

Expo veröffentlicht alle paar Monate eine neue SDK-Version. Updates sind relativ schmerzlos: laufen und beheben Sie alle Änderungen. Bleiben Sie auf dem neuesten Stand, um die neuesten APIs und Sicherheitspatches zu erhalten.

Verwenden Sie TypeScript von Anfang an

Expo First Class unterstützt TypeScript. Wenn Sie ausführen, wählen Sie die TypeScript-Vorlage. Es fängt viele Fehler frühzeitig und verbessert die IDE-Autovervollständigung.

Optimieren Sie Image Assets

Verwenden Sie , um Bilder für Ihre App zu komprimieren, und nutzen Sie , um performante Bilder mit Caching und Platzhaltern zu laden.

Nutzen Sie die Expo Community

Der Discord Server, Foren und GitHub Diskussionen sind extrem aktiv. Viele häufige Probleme wurden gelöst.

Plan für App Store-Anforderungen

Selbst bei Expo müssen Sie die Richtlinien von Apple und Google einhalten. Stellen Sie sicher, dass Ihre App über Datenschutzmanifeste, richtige Symbole und Splash-Bildschirme verfügt. Verwenden Sie , um Berechtigungen und App-Metadaten festzulegen.

Häufige Fallstricke und wie man sie vermeidet

  • Vergessen, Peer-Abhängigkeiten zu installieren: Wenn Sie Expo-Module verwenden, müssen Sie manchmal verwandte Pakete manuell installieren (z. B. für die Navigation).
  • Übernutzung von console.log in der Produktion: Entfernen Sie alle Konsolenanweisungen vor dem Erstellen.
  • Hardcoding-Dimensionen: Verwenden Sie Hook von React Native, um verschiedene Bildschirmgrößen, einschließlich Tablets, zu unterstützen.
  • Verlasst euch auf die Expo Go für die abschließenden Tests: Expo Go ist ideal für die Entwicklung, aber einige APIs können sich bei einem eigenständigen Build anders verhalten.

Vom Anfang zur Produktion

Expo ist nicht nur ein Lernwerkzeug, sondern wird von vielen Produktions-Apps verwendet, einschließlich Apps für große Unternehmen. Der verwaltete Workflow kann Apps mit mäßiger Komplexität verarbeiten. Wenn Ihre App umfangreiche native Integrationen benötigt, ist der bloße Workflow immer verfügbar. Der Schlüssel ist, einfach zu beginnen und nur nativen Code hinzuzufügen, wenn es nötig ist.

Durch die Beherrschung der Expo lernen Sie Standard-React Native-Muster, die sich auf jedes native Projekt übertragen. Die Fähigkeiten, die Sie erwerben - Komponentendesign, Zustandsmanagement, Navigation und API-Integration - sind genau das, was Sie für die professionelle mobile Entwicklung benötigen.

Nächste Schritte und Ressourcen

Mit der Entwicklung mobiler Apps mit Expo werden die anfänglichen Barrieren beseitigt und Sie können sich auf das Wesentliche konzentrieren: die Logik, das Design und die Benutzererfahrung Ihrer App. Beginnen Sie noch heute und erfahren Sie, wie schnell mobile Entwicklung sein kann.