使用FlatList＃onViewableItemsChanged調用組件函數

我目前正在嘗試使用FlatList組件實現一種LazyLoading形式，該組件引入了一個名爲onViewableItemsChanged的整潔小功能，該功能爲您提供了不再是所有組件的列表在屏幕上以及現在在屏幕上的項目。使用FlatList＃onViewableItemsChanged調用組件函數

這是一個自定義的LazyLoad實現，因此比大多數可用的LazyLoad開源庫更復雜，這就是爲什麼我正在處理自己的實現。我已經看過react-native-lazy-load和其他人。

基本上，我需要能夠調用FlatList中呈現的組件的一部分的功能，我已經嘗試創建對FlatList中呈現的項目的引用，並將其作爲此類對象進行調用，但它不會' t似乎工作。

例如：

<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當一個新的可見項被帶到到屏幕上這應該叫，但裁判永遠存在。

來源

2017-07-21 Christian Tucker

我試過使用this.refs，我試過給FlatList一個引用並訪問this.refs.list.refs並試圖找到items屬性作爲列表的一部分。我只需要知道如何獲得基於密鑰的組件級訪問，以便我可以調用一個方法。 –

我其實是做的一切正確，但我不小心忘了解構從renderItem函數返回的參數，所以(item)應該已經({ item })

這是所有有給它。

來源

2017-07-22 04:25:51

使用FlatList＃onViewableItemsChanged調用組件函數

回答

相關問題