6

我目前正在尝试使用该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 永远不存在。

4

1 回答 1

3

我实际上做的一切都是正确的，但我不小心忘记解构从renderItem函数返回的参数，所以(item)应该是({ item })

这就是它的全部。

于 2017-07-22T04:25:51.137 回答