Schritt-für-Schritt-Anleitung – Arbeitsauftrag 1: Aktivitäts-Auswahl-Modal

Schritt-für-Schritt-Anleitung – Arbeitsauftrag 1: Aktivitäts-Auswahl-Modal

Ziel

Beim Klick auf das +-Symbol in der Aktivitäten-Sektion soll ein Modal-Fenster erscheinen. Dort können die Nutzer:innen eine Aktivität auswählen. Die Auswahl wird in der Konsole ausgegeben und das Modal schließt sich automatisch.

Voraussetzungen

• Die Komponente AddActivityModal.js ist bereits vorhanden.
• Sie arbeiten mit der Ausgangsversion der App.js und Activities.js.
• Sie kennen useState, Props und Event Handling in React Native.

Schritte zur Umsetzung

1. Modal-Komponente importieren:
   Öffnen Sie App.js und importieren Sie das Modal:

   import AddActivityModal from './components/AddActivityModal';

2. State für die Sichtbarkeit des Modals hinzufügen:
   Ergänzen Sie:

   const [isModalVisible, setIsModalVisible] = useState(false);

3. Liste der Aktivitäten definieren:
   Fügen Sie eine Beispiel-Liste hinzu:

   
   const predefinedActivities = [
     { type: 'Joggen' },
     { type: 'Radfahren' },
     { type: 'Spazieren' }
   ];

4. Funktion zur Auswahl einer Aktivität erstellen:
   

   
   const handleSelectActivity = (activity) => {
     console.log('Ausgewählte Aktivität:', activity);
     setIsModalVisible(false);
   };

5. Funktion zum Öffnen des Modals erstellen:
   

   
   const openModal = () => {
     setIsModalVisible(true);
   };

6. Activities-Komponente erweitern:
   Ersetzen Sie den bisherigen Aufruf durch:

   <Activities styles={styles} openModal={openModal} />

7. Modal-Komponente in JSX einfügen:
   Ganz am Ende von App.js innerhalb von <SafeAreaView>:

   
   <AddActivityModal
     visible={isModalVisible}
     predefinedActivities={predefinedActivities}
     onSelectActivity={handleSelectActivity}
     onClose={() => setIsModalVisible(false)}
   />

8. Activities.js anpassen:
   • Funktionsparameter anpassen:
     

     const Activities = ({ styles, openModal }) => (

   • Klickverhalten für das +-Symbol ergänzen:
     

     
     <TouchableOpacity onPress={openModal}>
       <MaterialIcons name="add" size={24} color="black" />
     </TouchableOpacity>

Ergebnis