Question

我目前正在尝试使用FlatList组件实现一种LazyLoading形式，该组件引入了一个名为onViewableItemsChanged的简洁小功能，它为您提供了不再包含的所有组件的列表屏幕以及屏幕上现在的项目。

这是一个自定义的LazyLoad实现，因此比大多数可用的LazyLoad开源库更复杂，这就是为什么我正在开发自己的实现。我已经调查了react-native-lazy-load和其他人。

基本上，我需要能够调用一个函数，该函数是FlatList中呈现的组件的一部分，我尝试创建对FlatList中呈现的项目的引用并将其调用，但它不会似乎工作。

例如：

<FlatList data={...}
    renderItem={(item) => <Example ref={(ref) => this[`swiperRef_${item.key}`] = ref}}
    onViewableItemsChanged={this.onViewableItemsChanged}
/>

onViewableItemsChanged = ({viewableItems}) => {
    viewableItems.forEach((item) => {
        const { isViewable, key } = item;
        if(isViewable && !this.cachedKeys.includes(key)) {
            const ref = this[`swiperRef_${key}`];
            if(!ref) return console.error('Ref not found');
            ref.startLoading();
            this.cachedKeys.push(key);
        }
    });
}

现在在<Example />组件中我将有一个名为startLoading的函数，当一个新的可见项被带到屏幕上时应该调用它，但是ref从不存在。

Answer 1

我实际上是在正确地做所有事情，但我意外地忘记解构从renderItem函数返回的参数，因此(item)应该是({ item })

这就是它的全部内容。

使用FlatList＃onViewableItemsChanged调用Component函数

1 个答案: