如何在响应本机的平面列表中应用延迟加载

Posted 2023-02-16

【中文标题】如何在响应本机的平面列表中应用延迟加载

【英文标题】：How to apply lazy loading in flatlist in react native

【发布时间】：2018-09-13 20:31:37

【问题描述】：

在响应原生的 Flatlist 中应用延迟加载的最佳方法是什么。 目前在平面列表中有无限滚动。 我是 React Native 的新手，所以我不知道。

【问题讨论】：

通常人们会监听onScrollEnd 事件，当它向服务器发送发送请求时，只需更新您的数据即可

你能找到一种延迟加载的方法吗？

【参考方案1】：

你应该使用

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

【讨论】：

不应该“限制”是一个常数整数，只有偏移量应该改变？如果我没记错的话，您的代码会在每次调用时获取越来越多的列表项，并开始获取以前项目的副本。第一个 100 以偏移量 0 获取，第二次调用将获取额外的 200 个偏移量为 100 的项目，第三次调用获取 300 个偏移量为 200 的项目（但从 200 到 300 的项目已经在第二次调用中获取）等等......？

用于偏移量：this.state.list + 1。这样每次你都可以从服务器获取新数据。