在寻找过程中,我发现this这个github问题提到了“UIManager.measureX方法的使用”,以此来测量内容大小。然而,在多次搜索源代码后,我似乎无法找到这些方法的使用位置。
请问有人能指点我正确的方向吗?
它相当隐蔽,我偶然发现了源代码。
你可以像这样尝试:
要求:
var RCTUIManager = require('NativeModules').UIManager;
渲染:
<ScrollView ref = {component=>{this._scrollView=component;}}>
</ScrollView>
事件:
someEvent: function() {
RCTUIManager.measure(this._scrollView.getInnerViewNode(), (...data)=>{console.log(data)});
}
从数据中,您可以获取高度为data
的第四个元素的滚动视图的内容大小。当然,您也可以从中获得内容偏移量。有关详细信息,请查看RCTUIMananger.m
的源代码。
当您使用getInnerViewNode
时,您可以获得ScrollView内部视图的框架。如果您想获取ScrollView的框架,则应使用React.findNodeHandle(this._scrollView)
,而ScrollView的框架并不总是等于其内部视图的框架。
(更新)
如果您想用callback
替换(...data)=>{console.log(data)}
,您应该像这样使用:
RCTUIManager.measure(this._scrollView.getInnerViewNode(), callback.bind(this));
您可以使用ScrollView的scrollToEnd()方法:
https://facebook.github.io/react-native/docs/scrollview.html#scrolltoend
根据文档描述: 如果这是一个垂直的ScrollView,则滚动到底部。 如果这是一个水平的ScrollView,则向右滚动。
<ListView
ref="list"
...
y
位置。页脚不必呈现任何可见内容,只需一个空的View
即可。您要找的是列表底部的位置。renderFooter={() => {
return <View onLayout={(e)=> {
this.footerY = e.nativeEvent.layout.y;
}}/>
}},
ListView
本身上添加一个onLayout
处理程序,保存列表的height
。onLayout={(e)=>{
this.listHeight = e.nativeEvent.layout.height;
}}
有了这两个信息,您可以这样滚动到列表底部:
if (this.listHeight && this.footerY && this.footerY > this.listHeight) {
var scrollDistance = this.listHeight - this.footerY;
var scrollResponder = this.refs.list.getScrollResponder();
scrollResponder.scrollWithoutAnimationTo(-scrollDistance);
}
你滚动到底部的频率取决于你的行为和需求。
GiftedMessenger是一个这样的例子。
虽然RCTUIManager.measure()
可以通过引用提取数据数组的第四个元素来工作,但在使用ScrollView时,使用以下方法更为合适(且更容易):
参考链接:https://facebook.github.io/react-native/docs/scrollview.html#oncontentsizechange
onContentSizeChange={( contentWidth, contentHeight ) => {
this._contentHeight = contentHeight
}}
当内部子组件完成布局并发生变化时,此事件将触发。这对我很有效,我建议使用这种支持的方法来确定内容边界。
<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})
}}>
ref
添加到 ScrollView 中了? - KChenvar callback = ...
的callback
回调函数? - KChen