Comment appliquer le chargement paresseux dans une liste plate dans React Native

Question

Quelle est la meilleure façon d'appliquer la charge différée dans Flatlist dans React Native. Actuellement, il y a un défilement infini dans la liste plate. Je suis nouveau sur React native donc je n'ai aucune idée.

Answer 1

Tu devrais utiliser

<FlatList ....
onEndReached={this.endReached}
onEndReachedThreshold={.7}
.../>

onEndReached: appelé une fois lorsque la position de défilement se trouve dans onEndReachedThreshold du contenu rendu.

et onEndReachedThreshold: À quelle distance de la fin (en unités de longueur visible de la liste) le bord inférieur de la liste doit être à partir de la fin du contenu pour déclencher le rappel onEndReached. Ainsi, une valeur de 0,5 se déclenchera onEndReached lorsque la fin du contenu est dans la moitié de la longueur visible de la liste.

Par exemple:

class YourClass extends Component {
  state = { list: [], offset: 0, limit: 100 };
  componentDidMount() {
      this.fetchResult();
  }
    fetchResult = () => {
        const { offset, limit, list } = this.state;
        fetchModeDateFromAPI(offset, limit).then(res => {
        if (!res.list) return;
        this.setState({
            list: list.concat(res.list),
            offset: offset + 100,
            limit: limit
        });
        });
    };
    render = () => {
        return (
        <FlatList
            style={{ flex: 1 }}
            extraData={this.state}
            onEndReached={this.fetchResult}
            onEndReachedThreshold={0.7}
            data={this.state.list}
            renderItem={rowData => {}}
            keyExtractor={item => item.id.toString()}
        />
        );
    };
}