Reagieren Sie auf den nativen ScrollView-Pulldown-Aktualisierungseffekt

Reagieren Sie auf den nativen ScrollView-Pulldown-Aktualisierungseffekt

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:
  • React Native-Codebeispiel basierend auf FlatList Pulldown Refresh Pullup Load
  • React native ListView fügt Beispiele für die Aktualisierung per Pulldown-Menü oben und per Klick unten hinzu
  • Beispiel für eine benutzerdefinierte Pulldown-Aktualisierung mit Pullup und geladener Liste in React Native
  • Verwendung der Pulldown-Aktualisierung von RefreshControll in React Native
  • React-native ListView zum Aktualisieren nach unten ziehen und zum Laden des Implementierungscodes nach oben ziehen
  • React implementiert native Pulldown-Aktualisierung

<<:  MySQL-Lösung für zeitgesteuerte Backups (mithilfe von Linux crontab)

>>:  Eine Kurzanleitung zu MySQL-Indizes

Artikel empfehlen

Vue implementiert eine einfache Produktion von Zählern

In diesem Artikelbeispiel wird der einfache Imple...

Reines HTML und CSS, um den JD-Karusselleffekt zu erzielen

Das JD-Karussell wurde mit reinem HTML und CSS im...

Mit CSS3 implementierte Schaltfläche zum Hovern von Bildern

Ergebnis:Implementierungscode html <ul Klasse=...

Detaillierte Schritte zur Installation von Anaconda unter Linux (Ubuntu 18.04)

Anaconda ist die beliebteste Python-Plattform für...

Beheben Sie den abnormalen Fehler beim Erstellen einer Vue-Umgebung mit Webpack

Inhaltsverzeichnis Konfigurieren Sie zuerst packa...

Der Unterschied zwischen JS-Pre-Parsing und Variablen-Promotion im Web-Interview

Inhaltsverzeichnis Was ist eine Voranalyse? Der U...

Realisierung des Karusselleffekts basierend auf jQuery

In diesem Artikel wird der spezifische Code von j...

Tutorial zur Master-Slave-Konfiguration der MySQL-Datenbank unter Windows

Der detaillierte Prozess zum Konfigurieren des My...