In diesem Artikel wird der spezifische Code des Pulldown-Aktualisierungseffekts von React Native ScrollView zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt Die RefreshControl-Eigenschaft von ScrollView wird zum Pulldown-Refresh verwendet und kann nur für vertikale Ansichten verwendet werden, d. h. „horizontal“ kann nicht „true“ sein. 1. Erstellen Sie eine benutzerdefinierte CKRefresh.js-Aktualisierungskomponente importiere React, {Component} von „react“; importieren { Sicht, Text, StyleSheet, ScrollView, Aktualisierungssteuerung, Maße } von „react-native“; const screenW=Dimensions.get('Fenster').width; exportiere Standardklasse CKRefresh erweitert Komponente{ Konstruktor(){ super(); dieser.Zustand={ rowDataArr:Array.from(neues Array(30)).map((Wert,Index)=>({ Titel: 'Daten initialisieren'+Index })), //Ob das Laden angezeigt werden soll istAktualisieren:false, geladen:0 } } machen(){ const rowsArr=this.state.rowDataArr.map((row,index)=>(<Row data={row} key={index}/>)) zurückkehren( <ScrollView Aktualisierungssteuerung={ <Aktualisierungskontrolle erfrischend={this.state.isRefreshing} beiAktualisieren={()=>dies._beiAktualisieren()} Farben={['rot','grün','blau']} Titel="Wird geladen..." /> } > {rowsArr} </ScrollView> ) } _onRefresh(){ //1. Anzeigeindikator this.setState({ istAktualisieren:true }); //2. Laden der Daten simulieren setTimeout(()=>{ let newDataArr=Array.from(neues Array(5)).map((Wert,Index)=>({ Titel: „Ich bin die heruntergeladenen Daten“ + (this.state.loaded+index) })).concat(dieser.state.rowDataArr); //Zustandsmaschine aktualisieren this.setState({ rowDataArr:newDataArr, istAktualisieren:false, geladen:dieser.Zustand.geladen+5 }); },2000); } } Klasse Row erweitert Komponente { statische Standardeigenschaften = { Daten:{} }; machen(){ zurückkehren( <Ansichtsstil={{ Breite: BildschirmW, Höhe: 40, Rahmenbreite unten: 1, RahmenunterseiteFarbe:'rot', Inhalt ausrichten: 'zentrieren' }}> <Text>{this.props.data.title}</Text> </Anzeigen> ) } } const Stile = StyleSheet.erstellen({ }) 2. Referenz in App.js /** * Beispiel einer React Native-App * https://github.com/facebook/react-native * * @format * @flow streng lokal */ importiere React von „react“; importieren { SafeAreaView, StyleSheet, ScrollView, Sicht, Text, Statusleiste, } von „react-native“; importieren { Kopfzeile, LearnMoreLinks, Farben, Debug-Anweisungen, Anweisungen zum erneuten Laden, } von „react-native/Libraries/NewAppScreen“; importiere CKRefresh aus „./components/CKRefresh“; const App: () => React$Node = () => { zurückkehren ( <> <StatusBar barStyle="dunkler Inhalt" /> <SafeAreaView-Stil={styles.mainViewStyle}> <CKRefresh/> </SafeAreaView> </> ); }; const Stile = StyleSheet.erstellen({ Hauptansichtsstil: { Flexibilität: 1, Hintergrundfarbe: '#fff', } }); Standard-App exportieren; 3. Die Ergebnisse sind wie in der Abbildung dargestellt Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
<<: MySQL-Lösung für zeitgesteuerte Backups (mithilfe von Linux crontab)
>>: Eine Kurzanleitung zu MySQL-Indizes
Inhaltsverzeichnis 【Funktionshintergrund】 [Rohes ...
Vorwort Bei der Entwicklung eines Projekts stieß ...
Ich habe kürzlich an einem Projekt zur Gesichtser...
Aktivieren Sie den Fernzugriff Aktivieren Sie die...
Inhaltsverzeichnis Vorherige Wörter Synchron und ...
Inhaltsverzeichnis 1. Beispielszenario 1.1. Legen...
Inhaltsverzeichnis 1. Deinstallieren Sie den Orig...
Vorwort Die Verwendung von CSS zum Generieren gep...
Anfänger können HTML lernen, indem sie einige HTM...
Zunächst: Was ist Datenbankpartitionierung? Ich h...
Wir alle wissen, dass die in der Front-End-Entwic...
Inhaltsverzeichnis Ereignisbindung von Klassenkom...
Inhaltsverzeichnis Vorwort Vorbereiten Zusammenfa...
Inhaltsverzeichnis Standardausführungsprozess Opt...
1. Abfragevorgang Prozessliste anzeigen 2. Fragen...