onEndReached 在 react-native flatList 中不起作用答案

【问题标题】：onEndReached not working in react-native flatListonEndReached 在 react-native flatList 中不起作用
【发布时间】：2018-10-26 19:51:58
【问题描述】：

<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>

onEndReached 在我滚动到末尾时未被调用，我无法从 API 获取更多数据。

【问题讨论】：

尝试将 onEndReachedThreshold 更改为 10

标签： react-native react-native-flatlist

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

onEndReachedThreshold 必须是介于0 和1 之间的数字才能正常工作，所以如果您需要一个小阈值，请尝试将其设置为0.1，甚至0.01，它应该可以在大多数情况下工作案例。

但是，根据我在 react native v0.57.4 中的测试，onEndReached 即使在那时也有一个不稳定的行为，有时当你在 Android 中滚动过快时它不会被调用，如果你在 iOS 上并且列表会产生反弹效果到达终点时，可能会被调用多次。触发我的列表结束功能的最一致的方法是自己进行列表结束检查，使用来自 ScrollView 的道具（FlatLists 接受）成为可能。我使用onScroll 道具做到了这一点：

//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}
            />

【讨论】：