平面列表问题中的 onEndReached答案

【问题标题】：onEndReached in Flatlist issue平面列表问题中的 onEndReached
【发布时间】：2018-03-03 15:31:51
【问题描述】：

如果我将平面列表包含在一个视图中，那么我的 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 之类的值。它说明了什么？我正在使用 react-native 0.47.2

【问题讨论】：

我认为您的代码没有任何问题。只需尝试将您的 react-native 版本更新为最新版本并检查。他们的实现中可能存在一个错误，将在最新版本中修复。

标签： react-native react-native-flatlist

【解决方案1】：

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

如果您想使用onEndReached，则不能在<ScrollView> 中使用<Flatlist>，因为Flatlist 找不到高度。

改用<View>

【讨论】：

我有一个文章屏幕，我想在用户到达文章正文末尾时加载 cmets。我该如何处理这个问题？现在我在滚动视图中有平面列表，它会无限期地触发 onEndReached。 stackoverflow.com/questions/55748813/…

【解决方案2】：

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

【讨论】：

【解决方案3】：

我对 RN 0.52 也有同样的问题

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

通过使用 flex=1 的 View 包装您的平面列表来修复

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

【讨论】：

有帮助的...有效答案！！

【解决方案4】：

我会这样使用它：

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

<FlatList
    onEndReached={this.handleMore}
/>

【讨论】：