web-dev-qa-db-fra.com

Comment ajouter plus d'enregistrements avec Spinner dans FlatList React-Native (signifie -10 - 10 enregistrements) manuellement! pas d'utiliser côté serveur

Salut, je développe un exemple d'application basé sur FlatList, voici mon code ici. En fait, j'ai montré des enregistrements entiers comme si j'avais 50 enregistrements sur mon compte. Mais maintenant, j'affiche 50 enregistrements entiers. Bur j'ai besoin de montrer 10 après avoir ajouté à 10 enregistrements. Mais je ne sais pas ajouter à FlatList.

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

Veuillez me montrer charger plus d'enregistrements avec l'indicateur d'activité. Merci d'avance

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

Si j'ai bien compris votre problème, vous recherchez infinite scrolling dans Flatlist. Vous pouvez y parvenir à l'aide des attributs onEndReached et onEndThreshold.

Considérez le prototype suivant

En supposant que vous stockez des enregistrements dans this.state.profiles.

Extraire de nouveaux enregistrements du serveur

Définition du numéro de page initial dans le constructeur

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

Récupération de nouveaux enregistrements

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

pour gérer le défilement

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

Fonction de rendu

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

Mises à jour locales

Si vous avez déjà extrait toutes les données, mais souhaitez afficher uniquement 10 à la fois, alors tout ce que vous avez à faire est de changer le 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]
  });
}

L'approche ci-dessus montrera Activity Indicator tout en tirant des enregistrements.

J'espère que cela vous aidera!

12
Prasun