Anleitung zu AA5 – Bewegungseintrag als Komponente

Schritt-für-Schritt-Anleitung – Datenliste optisch gestalten

Ziel

Sie erstellen eine eigene Komponente zur Darstellung eines Bewegungseintrags, sodass die Liste übersichtlicher und besser lesbar wird.

1. Komponente Bewegungseintrag.js erstellen

Erstellen Sie im Verzeichnis components/ die Datei Bewegungseintrag.js.

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

export default function Bewegungseintrag({ wert, index }) {
  return (
    <View
      style={{
        backgroundColor: '#f0f0f0',
        padding: 6,
        marginVertical: 2,
        borderRadius: 8,
        width: 200,
        alignSelf: 'center',
      }}
    >
      <Text style={{ fontFamily: 'monospace' }}>
        #{index + 1} – {wert.toFixed(2)} g
      </Text>
    </View>
  );
}

Die Komponente erhält den Messwert und den Index als Props und übernimmt die formatierte Darstellung.

2. Komponente in ErgebnisScreen.js verwenden

Import am Anfang der Datei:

import Bewegungseintrag from './Bewegungseintrag';

Ersetzen Sie im return-Bereich die bisherige Ausgabelogik:

<View style={{ marginTop: 20 }}>
  <Text style={styles.resultText}>Bewegungsliste:</Text>
  {bewegungen.slice(-100).map((wert, index) => (
    <Bewegungseintrag key={index} wert={wert} index={index} />
  ))}
</View>

Die Liste wird nun komponentenbasiert dargestellt und bleibt dadurch übersichtlich und leicht erweiterbar.