Reagieren Sie auf den nativen ScrollView-Pulldown-Aktualisierungseffekt

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({

})

/**
 * 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;