为什么 SectionList onEndReached 不起作用？答案

【问题标题】：Why SectionList onEndReached is not working?为什么 SectionList onEndReached 不起作用？
【发布时间】：2020-10-24 07:56:06
【问题描述】：

当我加载我的组件时，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 不起作用，有人知道发生了什么吗？谢谢。

【问题讨论】：

标签： react-native react-native-flatlist react-native-sectionlist

【解决方案1】：

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

【讨论】：

感谢回复，但我尝试设置0.5 仍然无法正常工作
当数据填满屏幕时，onEndReach 效果很好。尝试向屏幕添加更多数据
好的，问题是我必须先填满屏幕。谢谢，你帮了我很多。

【解决方案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>
  );
);

【讨论】：