Question

我的应用程序有一个大约80行的ListView，但是，在用户向下滚动之前，最初只会渲染10个：

<ListView
   dataSource={this.state.dataSource}
   renderRow={this.renderRow}
   renderSectionHeader={this.renderHeader}
   automaticallyAdjustContentInsets={false}
   removeClippedSubviews={true}
   initialListSize={10}
   scrollRenderAheadDistance={100}
   pageSize={10}
   style={{flex:1}}
   showsVerticalScrollIndicator={true}/>

如果用户加载所有80行，然后执行更改数据源的操作，它将一次替换所有80行，而不是仅从初始10开始。这会导致非常长的延迟，因为行需要一些处理和渲染的时间。

这是预期的行为，还是我做错了什么？

我设法通过仅向数据源添加10行来修复它，然后在添加剩余的70行后立即修复它，但这感觉非常像黑客。

Answer 1

非常简单，

克隆您当前的数据
在最后添加新数据
在组件中使用新数据

或者，在代码中

...
// your list view
<ListView
   dataSource={this.state.dataSource}
   renderRow={this.renderRow}
   renderSectionHeader={this.renderHeader}
   automaticallyAdjustContentInsets={false}
   removeClippedSubviews={true}
   initialListSize={10}
   scrollRenderAheadDistance={100}
   pageSize={10}
   style={{flex:1}}
   showsVerticalScrollIndicator={true}
   onEndReached={() => {
    this._updateDataSet();
  }}/>
...
_updateDataSet() {
    var incomingData = ...; // replace with your data source
    var allData = this.state.dataSource;
    var newData = allData.push(...incomingData);
    this.setState({
      dataSource: newData
    });
}

这只是一个示例，您可能需要调整_updateDataSet()或将其移至componentWillReceiveProps()

当DataSource更新时，如何防止React Native重新呈现ListView中的所有行页面？

1 个答案: