Schritt-für-Schritt-Anleitung: Implementierung der UI-Komponente QuoteList

Schritt-für-Schritt-Anleitung: QuoteList implementieren

1. Projekt öffnen

Öffnen Sie die Motivations-App-c in Snack oder lokal.

Dateistruktur vor der Änderung:

Motivations-App/
│── components/
│   │── Header.js
│   │── QuoteDisplay.js
│   │── QuoteInput.js
│── App.js

2. Neue Datei QuoteList.js erstellen

Erstellen Sie im Ordner components die Datei QuoteList.js.

Dateistruktur nach der Änderung:

Motivations-App/
│── components/
│   │── Header.js
│   │── QuoteDisplay.js
│   │── QuoteInput.js
│   │── QuoteList.js
│── App.js

3. QuoteList.js implementieren

Fügen Sie folgenden Code in QuoteList.js ein:

import React from 'react';
import { View, Text, FlatList, StyleSheet } from 'react-native';

export default function QuoteList({ quotes }) {
  return (
    <View>
      <Text style={styles.subHeader}>Alle Zitate:</Text>
      <FlatList
        data={quotes}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({ item }) => (
          <Text style={styles.listItem}>- {item}</Text>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  subHeader: {
    fontSize: 18,
    marginTop: 20,
    marginBottom: 10,
  },
  listItem: {
    fontSize: 16,
    marginBottom: 5,
  },
});

Funktionsweise:

• Gibt alle Zitate als Liste aus.
• Nutzt FlatList zur dynamischen Darstellung.
• Erzeugt eindeutige Schlüssel über keyExtractor.
• Verwendet eigenes Styling für Überschrift und Listenelemente.

4. QuoteList in App.js einbinden

Importieren Sie die Komponente in App.js:

import QuoteList from './components/QuoteList';

Ersetzen Sie die bisherige Listenausgabe durch:

<QuoteList quotes={quotes} />

Vorher:

<Text style={styles.subHeader}>Alle Zitate:</Text>
<FlatList
  data={quotes}
  keyExtractor={(item, index) => index.toString()}
  renderItem={({ item }) => (
    <Text style={styles.listItem}>- {item}</Text>
  )}
/>

5. App testen

1. Fügen Sie ein neues Zitat hinzu und prüfen Sie, ob es in der Liste erscheint.
2. Überprüfen Sie, ob QuoteList.js korrekt importiert wurde.
3. Kontrollieren Sie, ob die alte FlatList aus App.js entfernt wurde.
4. Stellen Sie sicher, dass quotes korrekt als Prop übergeben wird.

Erwartetes Ergebnis

• QuoteList zeigt alle Zitate als Liste an.
• Neue Zitate werden korrekt hinzugefügt.
• Die App ist modularer und übersichtlicher strukturiert.

Zusatzaufgabe (optional)

• Fügen Sie eine Funktion zum Löschen einzelner Zitate hinzu.
• Passen Sie das Styling so an, dass die Liste in einem scrollbaren Bereich angezeigt wird.