如何在React Native中的平面列表中应用延迟加载 [英] How to apply lazy loading in flatlist in react native

问题描述

在react native中在Flatlist中应用延迟加载的最佳方法是什么.目前，平板列表中有无限滚动.我是React Native的新手，所以我没有任何想法.

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.

推荐答案

您应该使用

<FlatList ....
onEndReached={this.endReached}
onEndReachedThreshold={.7}
.../>

onEndReached :当滚动位置位于渲染内容的onEndReachedThreshold范围内时调用一次.

the onEndReached: Called once when the scroll position gets within onEndReachedThreshold of the rendered content.

和 onEndReachedThreshold :要触发onEndReached回调，列表的底部边缘必须距离内容的末端多远(以列表的可见长度为单位).因此，当内容的结尾在列表的可见长度的一半以内时，值为0.5将触发onEndReached.

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.

例如:

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

这篇关于如何在React Native中的平面列表中应用延迟加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！