[英]How to apply lazy loading in flatlist in react native
在本机响应中在Flatlist中应用延迟加载的最佳方法是什么。 目前,平板列表中有无限滚动。 我是React Native的新手,所以我没有任何想法。
你应该用
<FlatList ....
onEndReached={this.endReached}
onEndReachedThreshold={.7}
.../>
onEndReached
:当滚动位置位于渲染内容的onEndReachedThreshold范围内时,调用一次。
和onEndReachedThreshold
:列表的底边必须从内容的末尾到末尾(以列表的可见长度为单位)多远才能触发onEndReached回调。 因此,当内容的结尾在列表的可见长度的一半以内时,值为0.5将触发onEndReached。
例如:
class YourClass extends Component {
state = { list: [], offset: 0, limit: 100 };
componentDidMount() {
this.fetchResult();
}
fetchResult = () => {
const { offset, limit, list } = this.state;
fetchModeDateFromAPI(offset, limit).then(res => {
if (!res.list) return;
this.setState({
list: list.concat(res.list),
offset: offset + 100,
limit: limit
});
});
};
render = () => {
return (
<FlatList
style={{ flex: 1 }}
extraData={this.state}
onEndReached={this.fetchResult}
onEndReachedThreshold={0.7}
data={this.state.list}
renderItem={rowData => {}}
keyExtractor={item => item.id.toString()}
/>
);
};
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.