web-dev-qa-db-fra.com

React La pagination FlatList native ne fonctionne pas - onEndReached ne se déclenche pas

J'utilise le composant FlatList réactif natif pour lister les éléments La pagination ne se produit pas comme prévu, selon la documentation surEndReached doit être renvoyé lorsque la fin de la page est atteinte, actuellement j'ai essayé de changer les valeurs de onEndReachedThreshold (essayé 0.1, 1.0, 0.5, 0,01), je mets également un drapeau rafraîchissant. Remarque: j'utilise ReactNative 0.48.4 Alors voici mon code

<Container style={{ marginTop: 22 }}>
      <Content
        style={{ flex: 1 }}
        contentContainerStyle={{ flexGrow: 1 }}
      >
        <View style={{ flex: 1 }}>
          <FlatList
            initialNumToRender={10}
            refreshing={this.state.refreshing}
            onEndReachedThreshold={0.5}
            onEndReached={({ distanceFromEnd }) => {
              console.log('on end reached ', distanceFromEnd);
            }}
            data={this.props.messages}
            renderItem={this.notificationContent.bind(this)}
            keyExtractor={(item) => item._id}
          />
        </View>
      </Content>
    </Container>

J'ai déjà essayé toutes les solutions possibles comme indiqué dans les réponses pour problèmes github

Vous avez de l'aide ici?

react-nativereact-native-flatlist
7
Sadanand

Vous utilisez NativeBase dans votre projet et la Flatlist est sur le contenu, ils sont en conflit. Pour résoudre ce problème, vous devez supprimer le contenu

9
Hao Le

La même chose se produit avec moi, vous devez ajouter contentContainerStyle = {flex: 1}

<Content contentContainerStyle={{ flex: 1 }}>
3
arahmanali

Passez la propriété extraData à FlatList en tant que extraData = {this.state} consultez docs pour plus d'informations.

0
Isaac Sekamatte
onEndReachedThreshold={0.5}     remove this line
0
Vishnu Magar