javascript 如何在本机反应的平面列表中应用延迟加载
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49648292/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to apply lazy loading in flatlist in react native
提问by elle kay
What is the best possible way to apply lazy load in Flatlist in react native. Currently there is infinite scroll in the flatlist. I am new to React native so i dont have any idea.
在 React Native 的 Flatlist 中应用延迟加载的最佳方法是什么。目前在平面列表中有无限滚动。我是 React Native 的新手，所以我不知道。
回答by Deivison Sporteman
You should use
你应该使用
<FlatList ....
onEndReached={this.endReached}
onEndReachedThreshold={.7}
.../>
the onEndReached: Called once when the scroll position gets within onEndReachedThreshold of the rendered content.
the onEndReached：当滚动位置进入渲染内容的 onEndReachedThreshold 时调用一次。
and onEndReachedThreshold: How far from the end (in units of visible length of the list) the bottom edge of the list must be from the end of the content to trigger the onEndReached callback. Thus a value of 0.5 will trigger onEndReached when the end of the content is within half the visible length of the list.
and onEndReachedThreshold: 距离末尾多远（以列表的可见长度为单位），列表的底部边缘必须距离内容的末尾多远才能触发 onEndReached 回调。因此，当内容的结尾在列表可见长度的一半以内时，值 0.5 将触发 onEndReached。
E.g:
例如：
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()}
/>
);
};
}
