React Native - 如何衡量ScrollView中的内容大小？

Question

我想衡量一下我的内容的大小ScrollView.

因此,我使用的measure是NativeMethodsMixin:

import NativeMethodsMixin from 'NativeMethodsMixin'

我不太确定从哪里开始,大多数与此问题有关的SO帖子似乎已经过时了.

我明白我需要创建一个refto ScrollView(我做过和调用_scrollView,我可以使用它来访问它this.refs._scrollView).

问题是,我不能只是传递this.refs._scrollView到measure像这样:

NativeMethodsMixin.measure(this.refs._scrollView, (data) => {
  console.log('measure: ', data)
})

我收到以下错误:

ExceptionsManager.js:61 findNodeHandle(...): Argument is not a component (type: object, keys: measure,measureInWindow,measureLayout,setNativeProps,focus,blur,componentWillMount,componentWillReceiveProps)

然后,我试图检索实际的节点句柄findNodeHandle并将其传递measure到此github问题中讨论:

const handle = React.findNodeHandle(this.refs._scrollView)
NativeMethodsMixin.measure(handle, (data) => {
  console.log('measure: ', data)
})

但这会导致同样的错误.有任何想法吗？

Answer 1

ScrollView定义了一个名为onContentSizeChange的道具:

<ScrollView
  onContentSizeChange={(width, height) => {
    console.log(width, height);
  }}>
  {content}
</ScrollView>

Answer 2

NativeMethodsMixin.measure.call(elementToMeasure, (x, y, width, height) => {
  ...
});