Navigation und API

Listen mit FlatList

FlatList erzeugt Einträge erst, wenn sie sichtbar werden. Damit bleiben auch lange Listen performant.

<FlatList
  data={cities}
  keyExtractor={(city) => city.name}
  renderItem={({ item }) => <CityRow city={item} />}
  ItemSeparatorComponent={Divider}
/>

Navigation mit Expo Router

Jede Datei in app/ ist eine Route. Der Stack im Layout verwaltet einen Stapel von Screens.

• app/index.tsx → /, der erste Screen
• app/weather.tsx → /weather
• Navigieren: router.push('/weather') legt den Screen auf den Stapel
• Zurück: router.back(), Zurück-Pfeil oder Zurück-Geste

Route mit Parametern

Parameter kommen über die URL und sind immer Strings. Gelesen werden sie mit useLocalSearchParams.

const { name, latitude, longitude } = useLocalSearchParams<{
  name: string;
  latitude: string;
  longitude: string;
}>();

Laden beim Öffnen

Jeder Wetter-Screen ruft useWeather(city) auf und lädt beim Öffnen. Das ist schon seit Schritt 7 so.

API-Anbindung mit einem Coding Agent

Aufgabe für den Agent: ein Repository für Open-Meteo bauen und im Hook einsetzen.

• Plan anfordern und prüfen, bevor Code entsteht
• umsetzen lassen, npx tsc --noEmit und npx expo lint, App testen
• Diff lesen und erklären können
• erst dann committen

HTTP mit fetch

fetch ist in React Native eingebaut, wie im Browser. Ein Paket braucht es nicht.

const params = new URLSearchParams({
  latitude: String(city.latitude),
  longitude: String(city.longitude),
  current: 'temperature_2m,weather_code,wind_speed_10m',
});
const response = await fetch(`https://api.open-meteo.com/v1/forecast?${params}`);
if (!response.ok) throw new Error(`HTTP-Fehler ${response.status}`);
const json = (await response.json()) as ForecastResponseDto;
return toCurrentWeather(json.current);

DTO und Datenmodell

Die JSON-Antwort bekommt eigene Typen (DTOs). Sie werden auf unser Datenmodell abgebildet.

// Ausschnitt der Antwort von https://api.open-meteo.com/v1/forecast
export type ForecastResponseDto = {
  current: CurrentDto;
};

export type CurrentDto = {
  temperature_2m: number;
  weather_code: number;
  wind_speed_10m: number;
};

Der Nutzen der Architektur

Für echte Daten wurde keine einzige Komponente geändert.

$ git diff --stat schritt-08 schritt-09
 src/data/api-weather-repository.ts | 50 ++++++++++++++++++++++++++++++++++++++
 src/data/api/open-meteo-dto.ts     | 10 ++++++++
 src/ui/use-weather.ts              |  4 +--
 3 files changed, 62 insertions(+), 2 deletions(-)

Übungen

Selbst oder mit einem Coding Agent umsetzen, jeweils Plan und Diff prüfen.

• Stadtsuche über die Geocoding-API von Open-Meteo
• 7-Tage-Vorhersage im Wetter-Screen
• Button „Erneut versuchen“ bei Fehlern
• Pull-to-Refresh im Wetter-Screen
• Unit-Tests für den Hook mit dem Fake-Repository
• Favoriten: Städte auf dem Gerät speichern