Wie fügen Sie laden mehrere Datensätze mit Spinner in FlatList reagieren-native (also -10 - 10 Datensätze) manuell! nicht aus mit server-Seite

Hallo, ich bin die Entwicklung von Beispiel-Anwendung basiert auf FlatList das ist mein code hier. Eigentlich zeigte ich ganze Datensätze wie ich 50 Datensätze auf mein Konto . Aber jetzt bin ich Anzeige der gesamten 50 Datensätze. Bur ich muss zeigen nach Zugabe von 10 zu 10 Datensätze. Aber ich weiß nicht hinzufügen zu FlatList.

Hier das ist mein code: 

<FlatList
                    data={this.state.profiles}
                    renderItem={({ item, index }) => this.renderCard(item, index)}
                    keyExtractor={item => item.id}
                    ItemSeparatorComponent={() => <Divider style={{ marginTop: 5, marginLeft: width * 0.2 + 20 }} parentStyle={{ backgroundColor: globalStyles.BG_COLOR, alignItems: 'baseline' }} />}
                />


renderCard (profile, index) {
    console.log('rendercard', profile);
    //
    return (
        <View key={profile.id}>
            <ProfileCard
                profile={profile}
                style={styles.card}
                onPress={() => this.props.screenProps.rootNavigation.navigate('Profile', { profile: this.state.profile, id: profile.id })}
                //onPress={() => alert('PROFILE')}
                onAddClick={() => this.setState({ connectionPageVisible: true, cardProfile: profile })}
                connectedIds={(this.props.screenProps && this.props.screenProps.connectedIds) || this.props.connectedIds}
            />
        </View>
    );
}

Bitte zeigen Sie mir Last mehr Datensätze mit der Aktivitätsanzeige.
Vielen Dank im Voraus

  • Ideal, wenn Sie bekommen die profile von einigen api, dann müssen Sie einen Grenzwert für die api zurück-10-Ergebnisse, und ein url-Objekt für die nächsten 10 Elemente und so weiter, wie das, was SoundCloud hat
  • vielen Dank für Ihre Antwort! von der service-Seite, die Sie gar nicht geben, keine Größenbeschränkung
InformationsquelleAutor Lavaraju | 2018-05-03
  1. 13

    Wenn ich verstanden habe, dein problem ordentlich, dann sind Sie auf der Suche für infinite scrolling im Flatlist. Dies erreichen Sie mit Hilfe von onEndReached und onEndThreshold Attribute.

    Betrachten Sie den folgenden Prototyp

    Vorausgesetzt, Sie speichern die Datensätze in this.state.profiles.

    Ziehen neue Datensätze vom server

    Einstellung der ersten Seite Anzahl im Konstruktor

    constructor(props){
   super(props);
   this.state = { page: 0}
}

    Holen neue Datensätze

    fetchRecords = (page) => {
    //following API will changed based on your requirement
    fetch(`${API}/${page}/...`)
    .then(res => res.json())
    .then(response => {
       this.setState({
           profiles: [...this.state.profiles, ...response.data] //assuming response.data is an array and holds new records
       });
    });
}

    behandeln Blättern

    onScrollHandler = () => {
     this.setState({
        page: this.state.page + 1
     }, () => {
        this.fetchRecords(this.state.page);
     });
}

    Render-Funktion

    render() {
    return(
        ...
        <FlatList
           data={this.state.profiles}
           renderItem={({ item, index }) => this.renderCard(item, index)}
           keyExtractor={item => item.id}
           ItemSeparatorComponent={() => <Divider style={{ marginTop: 5, marginLeft: width * 0.2 + 20 }} parentStyle={{ backgroundColor: globalStyles.BG_COLOR, alignItems: 'baseline' }} />}
           onEndReached={this.onScrollHandler}
           onEndThreshold={0}
        />
        ...
    );
}

    Lokale updates

    Wenn Sie bereits gezogen, alle Daten, sondern will nur zeigen 10 zu einer Zeit, dann alle Sie tun müssen ist, ändern Sie die fetchRecords

    fetchRecords = (page) => {
  //assuming this.state.records hold all the records
  const newRecords = []
  for(var i = page * 10, il = i + 10; i < il && i < this.state.records.length; i++){
      newRecords.push(this.state.records[i]);
  }
  this.setState({
    profiles: [...this.state.profiles, ...newRecords]
  });
}

    Obigen Ansatz zeigen Activity Indicator beim ziehen von Datensätzen.

    Hoffe, das wird helfen!

    • Vielen Dank für Ihre Antwort. Aber ich bin immer alle Datensätze aus der api. und in meinem api-ich habe keine Seite size-Attribut oder keyword
    • Ok, für diese habe ich Local updates, wobei davon ausgegangen wird, dass alle Daten, die gezogen wird, zuerst, dann, wenn der Benutzer zu erreichen, um das Ende der Liste, es wird aufgefüllt-Daten aus dem lokalen Staat. Werfen Sie einen Blick auf Local updates Teil.
    • BTW, page ist mentained lokal zu zeigen pegination nur. Ich wollte es einfach nur erweiterbar, so dass, wenn es eine änderung in der API, alle u tun müssen, ist ändern Sie die fetchRecords Methode.
    • Ich meine, jetzt sind Sie füllen die Daten lokal, wenn es eine änderung in der Zukunft zu bevölkern von Daten aus backend-dann brauchen Sie nur zu ändern fetch-Methode. Ich denke Local updates Teil sollte sich lösen Ihr Problem.
    • Aber meine api nicht size option
    • Ja, jetzt gibt es keine Unterstützung in der API, so dass Ihr Problem kann gelöst werden, mit Local updates Abschnitt erwähnt in meiner Antwort.

    InformationsquelleAutor Prasun
Schreibe einen Kommentar