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

IT技术 javascript reactjs react-native lazy-loading react-native-flatlist
2021-05-19 11:09:17

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

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