Heim  >  Artikel  >  Web-Frontend  >  Wie zeige ich die Ladeanzeige in React Native an?

Wie zeige ich die Ladeanzeige in React Native an?

PHPz
PHPznach vorne
2023-08-24 20:45:111351Durchsuche

Verwenden Sie Ladeindikatoren, wenn wir dem Benutzer mitteilen möchten, dass eine Anfrage, die er auf der Benutzeroberfläche stellt, Zeit in Anspruch nehmen wird. Wenn der Benutzer nach dem Ausfüllen des Formulars auf die Schaltfläche „Senden“ klickt oder auf die Schaltfläche „Suchen“ klickt, um Daten abzurufen.

ReactNative bietet eine ActivityIndicator-Komponente, die Ladeindikatoren auf der Benutzeroberfläche auf unterschiedliche Weise anzeigen kann.

Die grundlegende ActivityIndicator-Komponente lautet wie folgt:

<ActivityIndicator animating = {animating} color = &#39;#bc2b78&#39; size = "large"
style = {yourstyle}/>

Um ActivityIndicator zu verwenden, müssen Sie auf „Importieren“ wie folgt klicken:

import { ActivityIndicator} from &#39;react-native&#39;;

Nachfolgend sind einige wichtige Eigenschaften, die von ActivityIndicator bereitgestellt werden.

import { ActivityIndicator, View, StyleSheet } from &#39;react-native&#39;;
Dies ist der vollständige Code zur Anzeige der Ladeanzeige –
<ActivityIndicator
   animating = {animating}
   color = &#39;#bc2b78&#39;
   size = "large"
style = {styles.activityIndicator}/>
Sr.No Requisiten und Anleitungen
1 Animation p>

Animation für die Ladeanzeige. es nimmt einen booleschen Wert an true, um den Indikator anzuzeigen, false, um den Indikator auszublenden.

2 Farbe p>

Die von der Ladeanzeige angezeigte Farbe.

3 hidesWhenStopped

Hört auf, wenn der Indikator keine Animation hat. Sein Wert ist Richtig/Falsch.

4 Größe

Größenindikator. Die Werte reichen von klein bis groß.

... auf Animationsvariable eingestellt, standardmäßig auf true gesetzt. Rufen Sie die Methode „closeActivityIndicator“ in der Funktion „componentDidMount()“ auf, die den Animationsstatus nach 1 Minute auf „false“ setzt.

Ausgabe

Das obige ist der detaillierte Inhalt vonWie zeige ich die Ladeanzeige in React Native an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen