Bevor wir einzelne Bausteine durchgehen, hier die kompakte Referenz-Version für das Erstellen eines neuen React-Native-Projekts – jedes weitere Thema in dieser Serie startet mit denselben Grundschritten.

1. Beschreibung

Expo ist der schnellste Weg zu einem lauffähigen React-Native-Projekt: ein Befehl legt ein vollständiges Grundgerüst an, inklusive Entwicklungsserver und Live-Vorschau über die Expo-Go-App auf einem echten Smartphone – ganz ohne Xcode oder Android Studio.

2. Kurzes Beispiel

npx create-expo-app meine-erste-app
cd meine-erste-app
npx expo start

3. Komplettes Projekt

Legen Sie ein neues Projekt namens hallo-react-native an und passen Sie den Startbildschirm an:

npx create-expo-app hallo-react-native
cd hallo-react-native

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Hallo React Native!</Text>
      <Text style={styles.subtitle}>Meine erste eigene App</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: { fontSize: 24, fontWeight: 'bold', color: '#111827' },
  subtitle: { fontSize: 14, color: '#6b7280', marginTop: 8 },
});

npx expo start

4. Erklärung

• npx create-expo-app hallo-react-native – lädt das Expo-Grundgerüst herunter und legt den Projektordner an.
• expo-status-bar – steuert das Erscheinungsbild der Statusleiste (Uhrzeit, Akku, ...) oben am Gerät; style="auto" passt sie automatisch an helles/dunkles Design an.
• StyleSheet.create({{...}}) – definiert die Styles als JavaScript-Objekt, siehe Thema "Styling Elements" für Details.
• npx expo start – startet den Entwicklungsserver ("Metro Bundler") und zeigt einen QR-Code an.

5. Ausgaben