onEndReached in Flatlist issue

Question

Si je place la liste à plat dans une vue, mon onEndReached se déclenche indéfiniment si je supprime la vue qui l'entoure ne se déclenche pas du tout.

 render() {
    return (
        <Root>
            <Container>
                <Content>
                    <View>
                        {this.state.listView && (
                            <FlatList
                                data={this.state.variants}
                                keyExtractor={this._keyExtractor}
                                onEndReachedThreshold={0.5}
                                onEndReached={({ distanceFromEnd }) => {
                                    console.log(
                                        "on end reached ",
                                        distanceFromEnd
                                    );
                                    this.loadMore();
                                }}
                                numColumns={1}
                                renderItem={({ item, index }) => (
                                    <CatalogRow
                                        item={item}
                                        in_wishlist={this.state.in_wishlist}
                                        toggleWishlist={() =>
                                            this.toggleWishlist(item.title)
                                        }
                                        listView={this.state.listView}
                                    />
                                )}
                            />
                        )}
                    </View>
                </Content>
            </Container>
        </Root>
    );
}

Et ma distanceFromEnd prend des valeurs telles que 0, 960, 1200 quand elle est déclenchée. Qu'est-ce que cela indique? J'utilise react-native 0.47.2

Answer 1

C'était à cause de la balise <Content> englobante. Parfois, l’incorporation de balises natives réactives dans des balises natives de base pose de tels problèmes. J'ai remplacé les balises content et container par des balises View et maintenant cela fonctionne bien.

Answer 2

J'ai le même problème avec react-native 0.50.3

<Flatlist> ne doit pas être utilisé dans un <ScrollView> si vous souhaitez utiliser onEndReached car Flatlist ne peut pas trouver la hauteur.

Utilisez un <View> à la place 

Answer 3

Je voudrais l'utiliser comme ça:

handleMore = () => {
    // fetch more here
};

<FlatList
    onEndReached={this.handleMore}
/>

Answer 4

J'ai le même problème avec RN 0.52

Cela ressemble parce que Flatlist ne peut pas trouver la hauteur. Donc, il ne peut pas trouver la fin de la liste.

Corrigez en enveloppant votre flatlist par une vue avec flex = 1

<View style={{flex: 1}} > <Flatlist /> <View>