React Native, Expo und Navigation

React Native verwendet das React-Modell, rendert aber native Komponenten statt HTML. View ersetzt einen typischen Layoutcontainer, Text zeigt Text und Pressable behandelt Aktionen. Expo bündelt Werkzeuge und mobile APIs. Hausakte verwendet Expo Router für Routen sowie eigene native Module für Scanner, PDF-Vorschau und Erinnerungen. Diese Funktionen sind nicht automatisch Teil eines einfachen Browserbeispiels.

Beispieldateien

index.tsx

01Eine getrennte Expo-Lernapp erstellen

Erstelle mit npx create-expo-app@latest native_demo --template default@sdk-57 eine separate Expo-App. Verwende Node.js gemäß deren package.json. Speichere das Beispiel als app/index.tsx beziehungsweise src/app/index.tsx passend zum erstellten Router-Verzeichnis.

index.tsx · tsxDatei öffnen

import React, { useState } from 'react';
import { View, Text, TextInput, Pressable } from 'react-native';
export default function LearningScreen() {
  const [name, setName] = useState('');
  const [confirmed, setConfirmed] = useState('');
  return <View style={{ padding: 24, gap: 16 }}>
    <Text>House name</Text>
    <TextInput accessibilityLabel="House name" value={name} onChangeText={setName}
      style={{ borderWidth: 1, padding: 12 }} />
    <Pressable accessibilityRole="button" onPress={() => setConfirmed(name.trim())}>
      <Text>Confirm</Text>
    </Pressable>
    <Text>{confirmed || 'No confirmed name'}</Text>
  </View>;
}

Starten / prüfen

npx expo start

02Native Komponenten lesen

TextInput liefert mit onChangeText bereits den neuen String. Es gibt kein event.target.value. Stilwerte werden als Objekte übergeben. padding: 24 ist eine Zahl statt der CSS-Zeichenfolge "24px". Text muss innerhalb von Text stehen.

03Navigation von Fachregeln trennen

Expo Router erzeugt Routen aus Dateien. Der Bildschirm kann einen anderen Pfad öffnen. Eine gespeicherte ID eignet sich als Route, ein komplettes Objekt mit privaten Anhängen nicht. Feature-Hooks sollten den Bildschirmzustand halten, während Services die Fachregeln koordinieren.

04Gerätegrenzen beachten

Starte die einfache Lernoberfläche mit npx expo start. Sie benötigt kein eigenes natives Modul. Für die vollständige Hausakte reicht Expo Go dagegen nicht, weil ihre app-lokalen Android-Funktionen in einer passenden Dev-Installation enthalten sein müssen.

Erwartetes Ergebnis

Ein Name lässt sich eingeben. Confirm zeigt den normalisierten Wert als lokale Vorschau.

Deine Übung

Ergänze eine Fehleranzeige bei leerem Namen. Wo gehört später die eigentliche Speicherregel hin?

Lösung mit Erklärung anzeigen

Prüfe trim vor setConfirmed und halte eine passende Meldung im State. Die dauerhafte Fachregel gehört zusätzlich in einen Service. Ein Repository übernimmt die Speicherung. Der Bildschirm zeigt erst nach erfolgreicher Aktion einen bestätigten Zustand.

Projektbezug und Quellen

Das Beispiel ist zum Lernen vereinfacht. Die verlinkte Codeversion zeigt die Anwendung im Projekt und die dortigen Prüfungen.