Expo — Moderne React Native Entwicklung ohne Xcode und Android Studio

Expo vereinfacht die React Native Entwicklung. Expo Router, EAS Build, Config Plugins, Prebuild Workflow und Deployment in App Stores.

Einfuehrung in modernes React Native mit Expo¶

Expo hat die React Native Entwicklung revolutioniert, indem es einen verwalteten Workflow bereitstellt, der in den meisten Faellen Xcode oder Android Studio ueberfluessig macht. Es bietet leistungsstarke Tools zum Erstellen, Bereitstellen und Warten von React Native Anwendungen mit deutlich reduzierter Komplexitaet.

Moderne mobile Entwicklung mit Expo umfasst mehrere Hauptvorteile: - Verwalteter Workflow - Keine Konfiguration nativer Build-Tools noetig - Over-the-Air-Updates - Updates ohne App Store Genehmigung pushen - EAS Build - Cloud-basierter Build-Service - Config Plugins - Funktionalitaet erweitern ohne Eject - Expo Router - Dateibasiertes Routing-System

Wichtige Architekturkomponenten¶

Expo-Anwendungen folgen einem modernen Architekturmuster:

// App-Einstiegspunkt mit Expo Router
import { Stack } from 'expo-router/stack';

export default function RootLayout() {
  return (
    <Stack>
      <Stack.Screen name="index" options={{ title: 'Home' }} />
      <Stack.Screen name="profile" options={{ title: 'Profile' }} />
    </Stack>
  );
}

Expo Router bietet dateibasiertes Routing aehnlich wie Next.js, was die Navigation intuitiv und typsicher macht.

Konfiguration und Einrichtung¶

Moderne Expo-Projekte verwenden app.json oder app.config.js fuer die Konfiguration:

{
  "expo": {
    "name": "My App",
    "slug": "my-app",
    "version": "1.0.0",
    "platforms": ["ios", "android"],
    "plugins": [
      "expo-font",
      ["expo-camera", { "cameraPermission": "Allow app to access camera" }]
    ]
  }
}

EAS Build und Deployment¶

EAS (Expo Application Services) bietet Cloud-basiertes Bauen und Deployment:

# Expo — Moderne React Native Entwicklung ohne Xcode und Android Studio
npm install -g @expo/eas-cli

# Builds konfigurieren
eas build:configure

# Fuer Produktion bauen
eas build --platform all --profile production

# In App Stores einreichen
eas submit --platform ios

Config Plugins¶

Config Plugins ermoeglichen die Erweiterung nativer Funktionalitaet ohne Eject:

// Benutzerdefiniertes Config Plugin
const withCustomPlugin = (config) => {
  config.ios = config.ios || {};
  config.ios.infoPlist = config.ios.infoPlist || {};
  config.ios.infoPlist.NSCameraUsageDescription = "This app uses camera";

  return config;
};

module.exports = withCustomPlugin;

Best Practices¶

1. Expo Router verwenden fuer Navigation - Dateibasiertes Routing ist wartbarer
2. Config Plugins nutzen - Native Funktionalitaet ohne Eject hinzufuegen
3. EAS Build Profile - Verschiedene Konfigurationen fuer Entwicklung/Staging/Produktion
4. Over-the-Air-Updates - Expo Updates fuer schnelle Bugfixes verwenden
5. Umgebungsverwaltung - app.config.js fuer umgebungsspezifische Einstellungen verwenden

Entwicklungs-Workflow¶

# Entwicklungsserver starten
npx expo start

# Auf Geraet/Simulator ausfuehren
npx expo run:ios
npx expo run:android

# Produktions-Build erstellen
eas build --platform all --profile production

Expo bietet einen modernen, effizienten Workflow fuer die React Native Entwicklung mit hervorragenden Tools und Entwicklererfahrung. Es ist besonders leistungsstark fuer Teams, die sich auf die Anwendungslogik konzentrieren moechten, anstatt sich mit nativer Build-Konfiguration auseinanderzusetzen.