在 React Native 的 Flatlist 中应用延迟加载的最佳方法是什么。目前在平面列表中有无限滚动。我是 React Native 的新手,所以我不知道。
如何在本机react的平面列表中应用延迟加载
IT技术
javascript
reactjs
react-native
lazy-loading
react-native-flatlist
2021-05-19 11:09:17
1个回答
你应该使用
<FlatList ....
onEndReached={this.endReached}
onEndReachedThreshold={.7}
.../>
the onEndReached
:当滚动位置进入渲染内容的 onEndReachedThreshold 时调用一次。
and 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()}
/>
);
};
}
其它你可能感兴趣的问题