使用 FlatList#onViewableItemsChanged 调用组件函数

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 })

这就是全部了。