Theorie

Der ActivityIndicator-Komponente wird verwendet, um anzuzeigen, dass eine Aufgabe im Gange ist und dem Benutzer visuelles Feedback zu geben. Er erscheint typischerweise als sich drehendes Rad oder ein anderes animiertes Symbol, um zu vermitteln, dass die Anwendung gerade eine Operation ausführt.

Warum brauchen wir es?

Zeigt an, dass die Anwendung an einer Aufgabe arbeitet, um zu verhindern, dass der Benutzer annimmt, die Anwendung sei eingefroren.

Wie man mit ActivityIndicator arbeitet

• Der ActivityIndicator ist einfach zu verwenden und erfordert kein Zustandsmanagement;
• Wir können seine Sichtbarkeit steuern, indem wir ihn bedingt basierend auf dem Status einer Aufgabe rendern.

Beispiel

Erklärung

• Zunächst rendert die Komponente eine Willkommensnachricht mit der Text-Komponente und einen Button mit der TouchableOpacity-Komponente;
• Wenn der Button gedrückt wird, wird die fetchData-Funktion aufgerufen, die isLoading auf true setzt, um den ActivityIndicator anzuzeigen;
• Nach einer Verzögerung von 3 Sekunden (simuliertes Datenabrufen) setzt die fetchData-Funktion isLoading wieder auf false und aktualisiert den additionalData-Zustand mit etwas Text;
• Der ActivityIndicator wird angezeigt, solange isLoading true ist, und sobald isLoading false wird, werden die additionalData mit der Text-Komponente angezeigt.

Ergebnis

In der Praxis