react-native - 使用 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 })
这就是全部。