wake-up-neo.com

Wie man mit Spinner in FlatList reagieren-native (bedeutet -10 - 10 Datensätze) manuell laden mehr Datensätze hinzufügt! nicht von der Serverseite

Hallo, ich entwickle eine Beispielanwendung basierend auf FlatList. Dies ist mein Code hier. Eigentlich habe ich ganze Datensätze angezeigt, als hätte ich 50 Datensätze auf meinem Konto. Aber jetzt zeige ich ganze 50 Datensätze an. Bur Ich brauche Show 10 nach dem Hinzufügen zu 10 Datensätzen. Aber ich weiß nicht, ob ich FlatList hinzufügen soll.

Hier 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, mehr Datensätze mit Aktivitätsanzeige zu laden. Danke im Voraus

react-nativereact-native-androidreact-native-iosreact-native-flatlist
12
Lavaraju

Wenn ich Ihr Problem richtig verstanden habe, suchen Sie nach infinite scrolling In Flatlist. Dies erreichen Sie mit Hilfe der Attribute onEndReached und onEndThreshold.

Betrachten Sie den folgenden Prototyp

Angenommen, Sie speichern Datensätze in this.state.profiles.

Abrufen neuer Datensätze vom Server

Festlegen der ersten Seitenzahl im Konstruktor

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

Neue Datensätze abrufen

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
       });
    });
}

scrollen zu handhaben

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 alle Daten abgerufen haben, aber nur 10 Gleichzeitig anzeigen möchten, müssen Sie nur das fetchRecords ändern.

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]
  });
}

Oben angeführte Annäherung zeigt Activity Indicator, Während Datensätze gezogen werden.

Hoffe das wird helfen!

12
Prasun