Es ist Zeit für eine Herausforderung!

Jetzt, da Sie verschiedene Themen behandelt und sich mit der Syntax und den Komponenten von React Native vertraut gemacht haben, ist es an der Zeit, Ihre Fähigkeiten mit einer Herausforderung auf die Probe zu stellen. Sie werden ermutigt, diese Herausforderung von Grund auf zu bewältigen, beginnend mit der Initialisierung einer neuen React Native-App und endend mit der Implementierung ihrer vollständigen Funktionalität.

Sie werden mit Folgendem versorgt:

• Aufgabe: Das spezifische Ziel der Herausforderung;
• Schritte: Detaillierte Anweisungen, wie die Herausforderung zu bewältigen ist;
• Mögliche Lösung: Da Sie aufgefordert werden, diese Herausforderung selbst von Grund auf zu bewältigen, können Sie diesen Link verwenden, um ein Repository mit einer möglichen Lösung für die Herausforderung zu finden. Beachten Sie jedoch, dass dies nicht der einzige mögliche Weg ist, das Problem zu lösen.

Sind Sie bereit, die Herausforderung anzunehmen und Ihre React Native-Fähigkeiten zu präsentieren? Lassen Sie uns beginnen!

Aufgabe

Ihre Aufgabe ist es, eine einfache React Native-Anwendung zu erstellen, die die folgenden Komponenten enthält:

1. Schalterkomponente für das Umschalten zwischen Dunkel-/Hellmodus: Implementieren Sie eine Schalterkomponente, die zwischen Dunkel- und Hellmodus umschaltet. Der gesamte Hintergrund der App sollte sich entsprechend ändern, wenn der Schalter umgelegt wird;
2. TextInput-Komponente zur Angabe der Dauer: Fügen Sie eine TextInput-Komponente hinzu, in der der Benutzer eine Zahl eingeben kann, die die Dauer (in Sekunden) angibt, für die ein Aktivitätsindikator angezeigt werden soll;
3. Aktivitätsindikator: Zeigen Sie eine Aktivitätsindikator-Komponente für die vom Benutzer eingegebene Dauer an.

Schritte

Schritt 1: Einrichten der React Native App

1. Erstellen Sie eine neue React Native App mit dem Befehl npx create-expo-app ./ im neu erstellten Ordner;
2. Um das anfängliche Erscheinungsbild Ihrer App zu sehen, führen Sie den folgenden Befehl im Terminal aus: npm start.

Schritt 2: Aufräumen

Entfernen Sie den Standardinhalt der Datei App.js und alle unnötigen Dateien.

Schritt 3: Implementierung des Dark/Light Mode Toggles

1. Importieren Sie in App.js die notwendigen Komponenten aus React Native;
2. Erstellen Sie eine funktionale Komponente namens App;
3. Verwenden Sie den useState Hook, um den Zustand des Dunkelmodus (darkMode) und seine Umschaltfunktion (toggleDarkMode) zu verwalten;
4. Implementieren Sie eine Switch-Komponente, die es Benutzern ermöglicht, zwischen Dunkel- und Hellmodus zu wechseln;
5. Definieren Sie Stile mit StyleSheet.create(), um zwischen Dunkel- und Hellmodus zu unterscheiden.

Schritt 4: Hinzufügen von TextInput für die Dauer-Eingabe

1. Importieren Sie die TextInput-Komponente aus React Native;
2. Erstellen Sie innerhalb der App-Komponente Zustandsvariablen, um die Dauer-Eingabe (duration) und ihre Aktualisierungsfunktion zu verwalten;
3. Integrieren Sie eine TextInput-Komponente, in der Benutzer die gewünschte Dauer (in Sekunden) für den Activity Indicator eingeben können.

Schritt 5: Einbindung des Activity Indicators

1. Importieren Sie die ActivityIndicator-Komponente aus React Native;
2. Erstellen Sie Zustandsvariablen zur Verwaltung des Ladezustands (isLoading) und seiner Aktualisierungsfunktion;
3. Implementieren Sie eine Funktion (handleShowActivityIndicator), die die Anzeige des Activity Indicators für die angegebene Dauer auslöst;
4. Integrieren Sie eine TouchableOpacity-Komponente, die beim Drücken die Funktion handleShowActivityIndicator ausführt;
5. Bedingte Darstellung des Activity Indicators basierend auf dem isLoading-Zustand.

Schritt 6: Testen der Anwendung

1. Überprüfen Sie, ob der Dark/Light Mode Toggle korrekt funktioniert;
2. Testen Sie die TextInput-Komponente, um sicherzustellen, dass sie numerische Eingaben für die Dauer akzeptiert;
3. Überprüfen Sie, dass der Activity Indicator nach der angegebenen Dauer erscheint und verschwindet, wenn er ausgelöst wird.

Schritt 7: Optionale Verbesserungen

1. Erwägen Sie, Styling hinzuzufügen, um das visuelle Erscheinungsbild der Komponenten zu verbessern;
2. Erkunden Sie die Einbindung von sanften Übergängen zwischen Dunkel- und Hellmodus für eine bessere Benutzererfahrung.

Visuelle Darstellung einer möglichen Lösung