在React Native中滚动到ScrollView的底部

col*_*fet 8 react-native

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

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

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

小智 14

它非常有用,我遇到了源代码.

你可以尝试这样:

要求:

var RCTUIManager = require('NativeModules').UIManager;
Run Code Online (Sandbox Code Playgroud)

渲染:

<ScrollView ref = {component=>{this._scrollView=component;}}>
</ScrollView>
Run Code Online (Sandbox Code Playgroud)

事件:

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

从数据中,您可以获得其高度为第四个元素的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));
Run Code Online (Sandbox Code Playgroud)