Question

我想找到一种以编程方式滚动到scrollView底部的方法。在查看ScrollView的源代码后，我知道了scrollTo方法，但是我似乎无法找到一种方法来测量scrollView的内容大小。

环顾四周之后，我遇到了this github问题，提到了如何使用＆＃34; UIManager.measureX方法＆＃34;衡量内容大小。但是，在通过源代码搜索了几次后，我似乎无法找到这些方法的使用位置。

有人能指出我正确的方向吗？

Answer 1

这是非常有用的，我遇到了源代码。

您可以尝试这样：

需要：

var RCTUIManager = require('NativeModules').UIManager;

渲染：

<ScrollView ref = {component=>{this._scrollView=component;}}>
</ScrollView>

事件：

someEvent: function() {
  RCTUIManager.measure(this._scrollView.getInnerViewNode(), (...data)=>{console.log(data)});
}

从数据中，您可以获得scrollview的内容大小，其高度是data的第四个元素。当然，您可以从中获取内容偏移量。请访问RCTUIMananger.m的源代码以获取更多详细信息。

当您使用getInnerViewNode时，您可以获得ScrollView内部视图框架的框架。如果你想获得ScrollView的框架，你应该使用React.findNodeHandle(this._scrollView)，而ScrollView的框架并不总是等于它的内部视图的框架。

（更新）

如果您想将(...data)=>{console.log(data)}替换为callback，则应该像这样使用它：

RCTUIManager.measure(this._scrollView.getInnerViewNode(), callback.bind(this));

Answer 2

Yo可以使用ScrollView的 scrollToEnd（）方法：

https://facebook.github.io/react-native/docs/scrollview.html#scrolltoend

根据文件： 如果这是垂直ScrollView滚动到底部。如果这是一个水平ScrollView向右滚动。

Answer 3

有更好的方法来做到这一点。粗略地说：

使用ListView呈现聊天。

<ListView
  ref="list"
  ...

使用renderFooter使用onLayout添加页脚到列表，以保存其y位置。页脚不必呈现任何可见的内容，只是空View。所有你正在寻找的是列表的底部。

renderFooter={() => {
  return <View onLayout={(e)=> {
    this.footerY = e.nativeEvent.layout.y;
  }}/>
}},

将onLayout处理程序添加到保存列表ListView的{{1}}本身。

height

使用这两位信息，您可以使用以下内容滚动到列表底部：

onLayout={(e)=>{
  this.listHeight = e.nativeEvent.layout.height;
}}

滚动到底部的频率取决于您，并取决于您想要的行为。

此实例的一个示例是GiftedMessenger。

Answer 4

虽然RCTUIManager.measure()通过引用提取数据数组的第4个元素，但是在使用ScrollViews时使用以下内容更合适（也更容易）：

RE：https://facebook.github.io/react-native/docs/scrollview.html#oncontentsizechange

onContentSizeChange={( contentWidth, contentHeight ) => {
    this._contentHeight = contentHeight
}}

一旦内部子组件完成布局并在更改后，此事件将触发。这对我有用，我在推荐内容界限时推荐这种支持的方法。

Answer 5

<ScrollView ref={scrollView => this.scrollView = scrollView}
      onContentSizeChange={( contentWidth, contentHeight ) => {
        this._contentHeight = contentHeight;
        console.log('Height: ' + this._contentHeight);
        this.scrollView.scrollTo({ y: this._contentHeight , animated: true})
    }}>

在React Native中滚动到ScrollView的底部

5 个答案: