Schritt-für-Schritt-Anleitung: Fahrt manuell erfassen

Anleitung: Modal mit Formular einbauen

Sie fügen einen „+“-Button hinzu, der ein Modal mit einem Formular zur manuellen Fahrterfassung öffnet. Das Datum wird automatisch vorbelegt.

1. Zustand für das Modal anlegen

1. Öffnen Sie App.js.
2. Importieren Sie useState (falls noch nicht vorhanden).
3. Fügen Sie folgenden Zustand hinzu:

const [modalVisible, setModalVisible] = useState(false);

2. Button zum Öffnen des Modals einfügen

1. Importieren Sie den Button:

import { Button } from 'react-native';

2. Fügen Sie unterhalb der Überschrift einen Button ein:

<Button title="+" onPress={() => setModalVisible(true)} />

3. Modal einbinden

1. Importieren Sie die Komponente ManuelleFahrtModal:

import ManuelleFahrtModal from './components/ManuelleFahrtModal';

2. Fügen Sie das Modal in den JSX ein:

<ManuelleFahrtModal
  visible={modalVisible}
  onClose={() => setModalVisible(false)}
  onFahrtSpeichern={(fahrt) => setFahrten([...fahrten, fahrt])}
/>

Hinweis: Das Datum wird automatisch mit dem aktuellen Tag vorbelegt.

Abschluss

Das Modal mit dem Eingabeformular ist nun eingebunden. Neue Fahrten werden mit Datum und weiteren Angaben gespeichert und in der Liste angezeigt.