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

为什么SectionList onEndReached无法正常工作？

2 个答案: