Question

我有一个包含大量内容的平面列表，当我在调试器控制台上10-15页后向下滚动时，我得到了这个：

VirtualizedList：你有一个很难更新的大型列表 - make 确保你的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

请使用RefreshControl并在Content native base中支持刷新控件

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

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

Answer 2

我在https://docs.nativebase.io中的$config = Get-Content -Raw $Config $configObject = ConvertFrom-Json –InputObject $config $StudentId = $configObject.StudentInfo.Student_id有相同的问题，我将Content更改为Content，并使用了View。现在工作了！

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

2 个答案: