onEndReached in Flatlist issue

Question

如果我将平面列表放在一个视图中，那么我的onEndReached将无限触发，如果我删除封闭的视图onEndReached根本不会被触发。

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

我的distanceFromEnd取值为0,960,1200时，它是trigerred。它表明了什么？ 我正在使用react-native 0.47.2

Answer 1

我对react-native 0.50.3有同样的问题

如果您想使用<Flatlist>，则不得在<ScrollView>中使用

onEndReached，因为Flatlist无法找到高度。

使用<View>代替

Answer 2

这是因为封闭的<Content>标签。有时将react-native标记与native-base标记嵌入会导致此类问题。我用View标签替换了内容和容器标签，现在它可以正常工作。

Answer 3

我会像这样使用它：

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

<FlatList
    onEndReached={this.handleMore}
/>

Answer 4

我对RN 0.52有同样的问题

这看起来是因为Flatlist无法找到高度。所以他找不到列表的结尾。

通过使用flex = 1

的视图包装您的平面列表来修复

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