如何滚动到 React Native ListView 的底部 [英] How to scroll to bottom of React Native ListView

问题描述

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

I'm writing an app using React Native. It has a ListView to show the list of items.

当有新项目可用时，我会在底部追加新项目.我想在 ListView 中滚动到底部以自动显示新项目.我该怎么做?

I'm appending new items at the bottom when there are new ones available. I'd like to scroll to bottom in the ListView to show the new items automatically. How can I do this?

推荐答案

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

As of React Native 0.41 both ListView and ScrollView have scrollToEnd() methods. ListView's is documented at https://facebook.github.io/react-native/docs/listview.html#scrolltoend

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

You'll need to use a ref to store a reference to your ListView when you render it:

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

然后，您只需调用 this.listView.scrollToEnd() 即可滚动到列表底部.如果您希望每次 ListView 的内容更改时都执行此操作(例如，添加内容时)，请从 ListView 的 <一个 href="https://facebook.github.io/react-native/docs/scrollview.html#oncontentsizechange" rel="noreferrer">onContentSizeChange 道具回调，就像一个 ScrollView.

Then, you can just call this.listView.scrollToEnd() to scroll to the bottom of the list. If you'd like to do this every time the content of the ListView changes (for instance, when content is added), then do it from within the ListView's onContentSizeChange prop callback, just like with a ScrollView.

这篇关于如何滚动到 React Native ListView 的底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！