Question

<View style={{ flex: 1 }}>
   <FlatList style={styles.container}
    refreshing={this.state.refreshing}
    data={this.props.recieveLetter}
    renderItem={this.renderItem}
    keyExtractor={extractKey}
    ListFooterComponent={this.renderFooter}
    onRefresh={this.handleRefresh}
    onEndReached={this.onEndReached}
    onEndReachedThreshold={0}
    />
</View>

当我滚动到结束并且无法从api获取更多数据时，不会调用onEndReached

Answer 1

onEndReachedThreshold必须为0到1之间的数字才能正常工作，因此，如果您需要较小的阈值甚至0.01，请尝试将其设置为0.1，并且在大多数情况下应该可以使用。

但是，从我在React Native v0.57.4中的测试来看，即使如此，onEndReached仍具有不稳定的行为，有时在Android中滚动太快时并不会调用它，并且如果您在iOS上并且列表到达时会产生反弹效果最后，它可能被多次调用。触发我的列表结束功能的最一致方法是自己检查列表结束，这可以使用ScrollView的道具（FlatLists接受）来实现。我是这样使用onScroll prop做到的：

//Outside of the component
const isCloseToBottom = ({layoutMeasurement, contentOffset, contentSize}) => {
    const paddingToBottom = 90; //Distance from the bottom you want it to trigger.
    return layoutMeasurement.height + contentOffset.y >=
        contentSize.height - paddingToBottom;
};

          //later, In my screen render
           <FlatList
                //other flatlist props, then...
                onScroll={({nativeEvent}) => {
                    if (isCloseToBottom(nativeEvent)) {
                        if (!this.state.gettingMoreList) {
                            this.setState({
                                gettingMoreList: true
                            }, () =>  {
                                this.loadMoreList(); //Set gettingMoreList false after finishing.
                            });
                        }
                    }
                }}
                scrollEventThrottle={1000}
            />

Answer 2

为我工作，将以下行添加到FlatList：

onEndReached={this.handleLoadMore.bind(this)} //bind is important

onEndReached无法在本机FlatList中工作

2 个答案: