RefreshContorl-Dropdown-Aktualisierungs-Tutorial in React Native

Wir wissen, dass es in der App ein Pulldown-Laden gibt und dass es in React Native ähnliche Steuerelemente gibt. Dieser Artikel stellt hauptsächlich die Verwendung der Pulldown-Aktualisierung von RefreshContorl in React Native vor.

1. Attributmethoden

(1) Die Funktion onRefresh wird aufgerufen, wenn die Ansicht aktualisiert wird.

(2) Erfrischt bool, ob die Ansicht aktualisiert wird erfrischend Zeigt den Indikator an und zeigt auch an, ob er gerade aktualisiert wird

(3) Farben [ColorPropType] Die Android-Plattform eignet sich zum Festlegen der Farbe des geladenen Indikators. Es kann mindestens ein Typ festgelegt werden Es können bis zu 4 Typen eingestellt werden

(4) „Enabled Bool Android Platform“ wird verwendet, um festzulegen, ob die Pulldown-Aktualisierungsfunktion verfügbar ist

(5) progressBackgroundColor ColorPropType legt die Hintergrundfarbe des Ladevorgangs fest Fortschrittsanzeige

(6) size RefreshLayoutConsts.SIZE .DEFAULT Die Größe der Ladefortschrittsanzeige, anwendbar auf die Android-Plattform

(7) tintColor ColorPropType Anwendbar auf die iOS-Plattform, um die Farbe festzulegen die Ladefortschrittsanzeige

(8) Titelzeichenfolge Gilt für die iOS-Plattform, um den Ladefortschritt festzulegen. Titeltextinformationen unter der Anzeige

2. Verwendung von

<ScrollView
    refreshControl={
     <RefreshControl
      refreshing={this.state.isRefreshing}
      onRefresh={this._onRefresh}
      tintColor="#ff0000"
      title="Loading..."
      titleColor="#00ff00"
      colors={[&#39;#ff0000&#39;, &#39;#00ff00&#39;, &#39;#0000ff&#39;]}
      progressBackgroundColor="#ffff00"
     />
    }
/>
 
_onRefresh() {
     this.setState({
       isRefreshing:true
     });
     
     var self = this;
     setTimeout(()=>{
 
      //加载数据
     },2000)
}

Der Ladeeffekt wird angezeigt.

Verwandte Empfehlungen:

Detaillierte Erläuterung der Pull-Up- und Pull-Down-Aktualisierungskomponente von mescroll.js

dropload.js-Plug -In-Pulldown-Aktualisierungs- und Pullup-Lademethode

Analyse der Implementierungsmethode der Pulldown-Aktualisierung und Pullup-Lademethode der WeChat-Applet-Liste

Das obige ist der detaillierte Inhalt vonRefreshContorl-Dropdown-Aktualisierungs-Tutorial in React Native. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!