为什么 SectionList onEndReached 不起作用？

Question

当我加载我的组件时 onEndReached 将在我滚动 <SectionList /> 之前触发一次，但是当我滚动到底部时 onEndReached 将不会再被触发。

这是我的代码：

render (
  return (
    <View style={{ flex: 1 }}>
      <SectionList
        style={{ backgroundColor: 'pink' }}
        refreshControl={
          <RefreshControl
            refreshing={false}
            onRefresh={() => console.log('refreshControl')}
            tintColor='gray'
          />
        }
        renderSectionHeader={this.sectionHeader}
        renderItem={this.renderSectionView}
        sections={reservations}
        onEndReachedThreshold={0.05}
        onEndReached={(data) => {
         console.log('data', data); // { distanceFromEnd: -457 }
         console.log('onEndReached');
        }}
        keyExtractor={(item, index) => index}
        ItemSeparatorComponent={() => <View style={{ backgroundColor: 'gray', height: StyleSheet.hairlineWidth }} />}
      />
    </View>
  );
);

这是我的 <SectionList /> 屏幕：

在我的 <SectionList /> refreshControl 中很好，但 onEndReached 不工作，有人知道发生了什么事吗？谢谢。

Answer 1

看来很多人都有同样的经历。有人建议将 onEndReachedThreshold 的值更改为大于 0.05 的值，例如：0.5

Answer 2

试试

render (
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <SectionList
        style={{ backgroundColor: 'pink' }}
        refreshControl={
          <RefreshControl
            refreshing={false}
            onRefresh={() => console.log('refreshControl')}
            tintColor='gray'
          />
        }
        renderSectionHeader={this.sectionHeader}
        renderItem={this.renderSectionView}
        sections={reservations}
        onEndReachedThreshold={0.05}
        onEndReached={(data) => {
         console.log('data', data); // { distanceFromEnd: -457 }
         console.log('onEndReached');
        }}
        keyExtractor={(item, index) => index}
        ItemSeparatorComponent={() => <View style={{ backgroundColor: 'gray', height: StyleSheet.hairlineWidth }} />}
      />
    </SafeAreaView>
  );
);