react-native - 如何滚动到 React Native ListView 的底部

Question

我正在使用 React Native 编写一个应用程序。它有一个 ListView 来显示项目列表。

当有新项目可用时，我会在底部附加新项目。 我想滚动到 ListView 底部以自动显示新项目。我怎样才能做到这一点？

Answer 1

从 React Native 0.41 开始，ListView 和 ScrollView 都有 scrollToEnd() 方法。 ListView 的记录在 https://facebook.github.io/react-native/docs/listview.html#scrolltoend

渲染时，您需要使用 ref 来存储对 ListView 的引用:

<ListView
  dataSource={yourDataSource}
  renderRow={yourRenderingCallback}
  ref={listView => { this.listView = listView; }}
</ListView>

然后，您只需调用 this.listView.scrollToEnd() 即可滚动到列表底部。如果您想在每次 ListView 的内容发生更改时(例如，添加内容时)执行此操作，请在 ListView 的 onContentSizeChange 内执行此操作prop 回调，就像 ScrollView 一样。