如何解决为什么SectionList onEndReached无法正常工作?
当我加载组件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 />
refreshControl
很好但onEndReached
无法正常工作的情况下,有人知道发生了什么吗?谢谢。
解决方法
看起来很多人都在经历同样的事情。建议将onEndReachedThreshold的值更改为大于0.05的值,例如:0.5
,尝试类似的东西
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>
);
);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。