Was macht Expo Beispiele?
expo/examples ist die offizielle Bibliothek von Expo mit etwa 70 Integrationsbeispielen – Verzeichnisse namens with-<Bibliothek> (z.B. with-stripe, with-maps), jedes aufgebaut um eine Bibliothek oder einen Dienst. Es handelt sich nicht um vollständige Apps: Es sind verwaltete Projekte (keine ios//android/-Verzeichnisse – die native Einrichtung erfolgt über Konfigurations-Plugins), und ein typisches Beispiel besteht aus einem einzigen Bildschirm mit ~100–200 Zeilen. Nutzen Sie sie als Quelle für das kanonische IntegrationsMuster – die Abhängigkeiten, app.json-Konfigurations-Plugins und die minimale Verdrahtung, die Expo im aktuellen SDK pflegt – und passen Sie dieses an die App des Benutzers an. Erwarten Sie nicht, daraus eine Anwendungsarchitektur ableiten zu können.
Greifen Sie zu einem Beispiel, bevor Sie eine Integration von Hand schreiben. (Arten – Full-Stack, Vorzeigeprojekte, Starter – sind in ./references/catalog.md vermerkt.)
Zwei Modi
- Inspiration/Anpassung (am häufigsten) – der Benutzer hat bereits ein Projekt. Finden Sie das passende Beispiel, lesen Sie seine Schlüsseldateien und übertragen Sie das Muster auf seinen Code.
- Scaffolding – Neuanfang. Starten Sie ein frisches Projekt direkt aus dem Beispiel.
Arbeitsablauf
1. Das richtige Beispiel finden
Ordnen Sie das Bedürfnis des Benutzers einem Beispielnamen zu (z.B. Zahlungen → with-stripe, Authentifizierung → with-clerk). ./references/catalog.md ist eine kategorisierte Momentaufnahme für eine schnelle Sichtung – sie kann jedoch veralten, daher bestätigen Sie anhand der Live-Liste:
# Live-Beispielnamen:
gh api repos/expo/examples/contents --jq '.[] | select(.type=="dir" and (.name|startswith(".")|not)) | .name'
# Aliase (umbenannt) + veraltete (tote/verschobene) Beispiele – vor der Empfehlung prüfen:
gh api repos/expo/examples/contents/meta.json --jq '.content' | base64 -d
meta.json ist die Quelle der Wahrheit für umbenannte oder tote Beispiele (veraltete Beispiele werden aus dem Repository-Baum entfernt, sind aber hier noch aufgeführt, jeweils mit einer message). Wenn ein Beispiel in der deprecated-Map enthalten ist, empfehlen Sie es nicht – folgen Sie der message zum aktuellen Pfad. Wenn es in aliases enthalten ist, verwenden Sie das destination.
2a. Inspirationsmodus – studieren, ohne das Projekt des Benutzers zu berühren
Der häufigste Fall: Der Benutzer hat bereits eine App und möchte sehen, wie Expo etwas macht. Lesen Sie das Beispiel als Referenz und übertragen Sie die Muster von Hand – überschreiben Sie niemals das vorhandene Projekt des Benutzers mit einem Beispiel.
Listen Sie zunächst das gesamte Beispiel in einem Aufruf auf. Integrationscode ist oft verschachtelt (z.B. liegen die Server-Routen von Stripe in app/api/), daher würden mit einer einstufigen Auflistung wichtige Dateien fehlen:
gh api 'repos/expo/examples/git/trees/master?recursive=1' \
--jq '.tree[].path | select(startswith("with-stripe/"))'
Lesen Sie dann zuerst die aufschlussreichen Dateien: README.md (Einrichtung) → package.json (Abhängigkeiten) → app.json (Konfigurations-Plugins/Berechtigungen) → den Integrationscode, den das Manifest enthüllt hat → .env (erforderliche Geheimnisse). Pro Datei:
gh api repos/expo/examples/contents/with-stripe/utils/stripe-server.ts --jq '.content' | base64 -d
# Kein gh? Raw-URL (Branch ist master):
curl -s https://raw.githubusercontent.com/expo/examples/master/with-stripe/utils/stripe-server.ts
Müssen mehr als ein paar Dateien gelesen werden? Viele Integrationen verteilen sich auf Server-Routen, einen Client-Provider und die Konfiguration (Stripe ist so). Überspringen Sie die dateiweisen Aufrufe – ziehen Sie das gesamte Beispiel in ein temporäres/gitignoriertes Verzeichnis (nicht das Benutzerprojekt) und lesen Sie es mit Grep/Read frei, um es dann von Hand zu übertragen:
npx degit expo/examples/with-stripe /tmp/expo-ref/with-stripe # saubere Kopie, keine Git-Historie
# Fallback ohne degit (sparse-checkout, kein vollständiger ~64 MB Clone):
git clone --depth 1 --filter=blob:none --sparse https://github.com/expo/examples.git /tmp/expo-ref/examples \
&& (cd /tmp/expo-ref/examples && git sparse-checkout set with-stripe)
Lesen Sie von dort mit Grep/Read; löschen Sie das temporäre Verzeichnis nach Abschluss.
2b. Scaffolding-Modus – neues Projekt aus einem Beispiel
npx create-expo --example with-stripe # Kurzform: npx create-expo -e with-stripe
bun create expo --example with-stripe # mit bun
3. In die App des Benutzers einfügen – zerstörungsfrei (entscheidend)
Wenn der Benutzer bereits eine App hat, fügen Sie nur das hinzu, was das Beispiel einführt; überschreiben Sie niemals seine Einrichtung.
- Version angleichen – keine festen Versionen kopieren. Beispiele folgen dem aktuellen SDK, daher stimmen ihre
package.json-Pins nicht mit einem älteren Projekt überein. Fügen Sie nur die fehlenden Abhängigkeiten mitnpx expo install <pkg>hinzu (es löst SDK-korrekte Versionen auf), anstatt exakte Versionen zu kopieren. - Konfiguration zusammenführen, nicht ersetzen. Fügen Sie nur die
app.json/app.config.*-Plugins und -Berechtigungen hinzu, die das Beispiel einführt und die dem Benutzer fehlen – behalten Sie seinen vorhandenen Konfigurationsblock intakt. - Integrationscode übertragen.
- Umgebungsvariablen aus der
.env-Struktur des Beispiels neu erstellen – sie enthält Platzhalter, keine funktionierenden Geheimnisse.
Fertig, wenn der Integrationscode übertragen ist und jede Abhängigkeit, jedes Konfigurations-Plugin, jede Berechtigung und jede Umgebungsvariable, die er benötigt, in der App des Benutzers vorhanden ist – nicht, wenn es nur so aussieht, als sei alles verdrahtet.
Fallstricke
- Der Standard-Branch ist
master, nichtmain(wichtig für Raw-URLs und sparse checkout). - Single-Click-Deployment. Jedes Beispiel hat eine Start-URL:
https://launch.expo.dev/?github=https://github.com/expo/examples/tree/master/<beispiel>.
Verwandte Skills
- Native UI-Komponenten (@expo/ui Paket) →
expo-ui - Styling und naturschöne Bildschirme →
expo-native-ui - Navigation und Routing →
expo-router - Erstellen eines nativen Moduls →
expo-module - SDK-Upgrade vor der Übernahme eines auf dem neuesten SDK basierenden Beispiels →
expo-upgrade
Referenzen
./references/catalog.md– kategorisierte Momentaufnahme der Beispielbibliothek für schnelle Sichtung.
Feedback einreichen
Wenn Sie Fehler, irreführende oder veraltete Informationen in diesem Skill finden, melden Sie es, damit Expo es verbessern kann:
npx --yes submit-expo-feedback@latest --category skills --subject "expo-examples" "<konkretes Feedback>"
Reichen Sie dies nur ein, wenn Sie etwas Konkretes und Umsetzbares zu berichten haben. Fügen Sie so viel relevanten Kontext wie möglich hinzu. Wenn ein KI-Assistent wiederholt fehlschlug oder der Benutzer eine Expo-Aufgabe übernehmen musste, laden Sie den Skill expo-skill-feedback und folgen Sie dessen eval-candidate-Ablauf, anstatt den obigen Befehl erneut zu verwenden.