Theorie

In React Native ist der Zustand ein JavaScript-Objekt, das die dynamischen Daten einer Komponente speichert und ihr Verhalten bestimmt. Der Zustand ermöglicht es einer Komponente, Informationen zu verfolgen, die sich im Laufe der Zeit ändern können, wie Benutzereingaben, API-Antworten oder andere dynamische Inhalte.

Warum brauchen wir den Zustand?

Der Zustand ist unerlässlich, wenn Sie möchten, dass Ihre Komponente dynamisch ist und auf Benutzerinteraktionen reagiert. Wenn Sie beispielsweise eine Schaltfläche haben, die ein Modal umschaltet, oder einen Zähler, der bei jedem Tastendruck inkrementiert wird, benötigen Sie den Zustand, um den aktuellen Zustand dieser Elemente zu verfolgen.

Arbeiten mit State

Der State in React Native wird verwendet, um dynamische Daten innerhalb einer Komponente zu verwalten. Er ermöglicht es Komponenten, Werte zu haben, die sich im Laufe der Zeit ändern können. Häufige Anwendungsfälle sind:

• Benutzereingaben: Erfassen und Aktualisieren von Benutzereingaben (z.B. Formularfelder, Texteingaben);
• Sichtbarkeit von Komponenten: Umschalten der Sichtbarkeit bestimmter Elemente;
• API-Anfragen: Speichern und Aktualisieren von Daten, die von APIs abgerufen werden;
• Dynamische Benutzeroberfläche: Umgang mit Änderungen in der Benutzeroberfläche basierend auf Benutzerinteraktionen.

Beispiel 1

Ergebnis 1

Beispiel 2

Betrachten Sie ein Szenario, in dem wir die Sichtbarkeit einer Komponente basierend auf einem Tastendruck umschalten möchten.

In diesem Beispiel bestimmt der isVisible-Zustand, ob die <Text>-Komponente gerendert wird. Der Tastendruck schaltet die Sichtbarkeit um.

Ergebnis 2

In der Praxis