Question

我有一个简单的ListView，它似乎需要很长时间来加载它的项目。我已经在发布模式下进行了测试，加载整个页面需要大约3秒钟。如果我设置initialListSize={1}，我可以看到它逐项构建列表。

ListView JSX代码：

<ListView
      dataSource={this.state.dataSource}
      renderRow={this.renderRow}
      renderSeparator={(sectionID, rowID) => <View key={`${sectionID}-${rowID}`} style={styles.separator} />}
      style={styles.listView}
      initialListSize={1}
    />

renderRow方法：

  renderRow(row) {
    // console.log ('rendering scale row: ' + row.numerator + ':' + row.denominator );
    return (
      <TouchableHighlight onPress={() => this.pressRow(row)} underlayColor="grey">
        <View style={styles.rowContainer}>
          <Text style={styles.rowText}>{row.hasOwnProperty('label') ? row.label : row.numerator + ':' + row.denominator}</Text>
          <Text style={styles.rowText}>{row.hasOwnProperty('label') ? row.numerator + ':' + row.denominator : ''}</Text>
        </View>
      </TouchableHighlight>
    );
  }

我没有在renderRow中做任何非常复杂的事情......数据已经在之前的视图中获取并通过props传递。

有什么我不知道的可能会影响加载/渲染时间吗？

这仅适用于iOS，适用于iPhone 4S。我的测试中只有12-21行。

我还应该补充一点，应用程序的核心是使用JUCE C ++框架并在其中一个视图中运行一些音频处理。我有一个音频处理线程只在该视图可见时运行 - 所有其他视图（包括具有此ListView的视图）将停止音频处理线程。我也试过以类似的方式停止音频线程，但它没有任何区别。

Answer 1

不确定这是否会对你有所帮助，但我可以想到你可以尝试的三件事......

cmd + T将打开/关闭“慢动画”。这是一个很长的镜头
如果您正在写入console.log，请注释掉这些行。他们有时会惊人地陷入困境。
关闭开发模式。你不应该，但值得一试

Answer 2

最好开始使用FlatList或SectionList，因为ListView现已弃用。

https://facebook.github.io/react-native/docs/listview.html

很少有警告，你必须使用FLUX / REDUX或RELAY。请在此处查看详细信息（功能/注意事项） https://facebook.github.io/react-native/blog/2017/03/13/better-list-views.html

React Native ListView加载缓慢

2 个答案: