React Native - 如何测量 ScrollView 中内容的大小？答案

【问题标题】：React Native - How to measure size of content in ScrollView?React Native - 如何测量 ScrollView 中内容的大小？
【发布时间】：2016-08-11 18:41:31
【问题描述】：

我想测量我的ScrollView 中内容的大小。

因此，我使用来自NativeMethodsMixin 的measure：

import NativeMethodsMixin from 'NativeMethodsMixin'

我不太确定从这里去哪里，大多数与此问题相关的 SO 帖子似乎都已过时。

我知道我需要为我的ScrollView 创建一个ref（我这样做并称为_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 issue 中所述：

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

但这会导致同样的错误。有什么想法吗？

【问题讨论】：

标签： javascript reactjs scrollview react-native nativemethodsmixin

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：