避免在列表视图中呈现所有项目

Question

正如您所见，我首先尝试初始化5项。 但是，从调试器控制台我也可以看到所有项目都被渲染，这会降低我的应用程序性能！

有什么想法吗？

的ListView

<SwipeListView
    initialListSize={5}
    dataSource={this.ds.cloneWithRows(this.props.words)}
    renderRow={this.renderWord.bind(this)}
    renderHiddenRow={(data, secId, rowId, rowMap) => this.renderDeleteAction(data, secId, rowId, rowMap)}
    disableRightSwipe={false}
    disableLeftSwipe={false}
    leftOpenValue={RIGHT_OPEN_WIDTH}
    rightOpenValue={-RIGHT_OPEN_WIDTH}
/>

细胞/档案

render(){
    let startTime = Date.now();
    let detailView = this.computeDetailView()
    console.log(this.props.word);
    console.log(Date.now() - startTime);
    return(
        this.props.showDetail && detailView
    )
}

的console.log

更新

更新为FlatList

后

原始视图

Answer 1

在查看react-native-swipe-list-view的最新版本后，它使用了不能更改缓存行为的弃用<ListView />。

open source code highlight

修改其代码以使用<FlatList />，然后您可以利用其<VirtualizedList />包裹，授予对windowSize和maxToRenderPerBatch道具的访问权限。

之后，这应该有效

<SwipeListView
  initialListSize={5}
  maxToRenderPerBatch={5}
  windowSize={10}
  dataSource={ds.cloneWithRows(words)}
  renderRow={(data) => {
    console.log('row', data);
    return <Text style={{height: 200}}>This is row {data}</Text>;
  }}
  renderHiddenRow={(data, secId, rowId, rowMap) => {
    console.log('hidden row', data);
    return <Text>This is hidden row {data}</Text>;
  }}
  disableRightSwipe={false}
  disableLeftSwipe={false}
  />