React Native Flatlist - VirtualizedList：您有一個很難更新的大型列表

Question

我有一個包含大量內容的平面列表，當我在調試器控制台上10-15頁后向下滾動時，我得到了這個：

VirtualizedList：你有一個很快更新的大型列表 - 確保你的renderItem函數呈現遵循React性能最佳實踐的組件，如PureComponent，shouldComponentUpdate等。{dt：582，prevDt：1651，contentLength：15187.5}

僅供參考：我曾嘗試使用PureComponent和更多方法，但沒有人有用我在控制台中獲得相同的輸出。

為什么我得到這個以及如何解決這個問題？

這是我的代碼：

<FlatList
    data={outfits}
    keyExtractor={(item, index) => index}
    numColumns={2}
    initialNumToRender={5}
    getItemLayout={(outfits, index) => (
       { length: 50, offset: 50 * index, index }
    )}
    extraData={this.state.extraData}
    renderItem={({item,index}) => <Items item={item} index={index}/>}
    onRefresh={this.handleRefresh}
    refreshing={this.state.refreshing}
    onEndReached={this.handleLoadMore}
    onEndReachedThreshold={20}
    ListFooterComponent={this.renderFooter}
/>

Answer 1

我在https://docs.nativebase.io中遇到了與Content相同的問題，我將Content更改為View並使用了PureComponent 。 而現在它的工作！

Answer 2

請在內容本機庫中使用RefreshControl和props刷新控件

 import { StyleSheet, RefreshControl } from 'react-native';

...
render(
  <Content refreshControl={<RefreshControl refreshing={this.state.refreshing} onRefresh={this._onRefresh.bind(this)} />}>
       <List .../>
      </Content>
...
)