View React Native：测量视图

我试图使用

ref

来测量视图，但是返回的

宽度

为0，尽管我看到屏幕上显示的视图（它远远不等于0）

我试着这么做：但它就是不起作用。。。我只想得到视图的实际宽度

这是我的密码：

var Time = React.createClass({
  getInitialState: function() {
    return({ progressMaxSize: 0 }); 
  },
  componentDidMount: function() {
    this.measureProgressBar();
  },
  measureProgressBar: function() {
    this.refs.progressBar.measure(this.setWidthProgressMaxSize);
  },
  setWidthProgressMaxSize: function(ox, oy, width, height, px, py) {
    this.setState({ progressMaxSize: width });
  },
  render: function() {
    return(
      <View style={listViewStyle.time} ref="progressBar">
        <View style={listViewStyle.progressBar} >
          <View style={[listViewStyle.progressMax, { width: this.state.progressMaxSize }]}/>
        </View>
      </View>
    );
  }
}); 

---

在晚上，一些人谈论了一个（黑客）解决方案，但它解决了我的问题，在这里找到了：

基本上，解决方案是使用

setTimeout

，一切都能神奇地工作：

componentDidMount: function() {
  setTimeout(this.measureProgressBar);
},

measureProgressBar: function() {
  this.refs.progressBar.measure((a, b, width, height, px, py) =>
    this.setState({ progressMaxSize: width })
  );
}

---

您想要测量进度条

var Time=React.createClass({
getInitialState:函数（）{
返回（{progressMaxSize:0}）；
},
measureProgressBar:函数（）{
this.progressBar.measure（this.setWidthProgressMaxSize）；
},
setWidthProgressMaxSize：函数（ox、oy、width、height、px、py）{
this.setState（{progressMaxSize:width}）；
},
render:function（）{
返回(
{this.progressBar=c；}onLayout={this.measureProgressBar}>
);
}
});

要测量视图大小，根本不需要使用ref。 您可以通过onLayout从nativeEvent获得它

measureView(event: Object) {
   console.log(`*** event: ${JSON.stringify(event.nativeEvent)}`);
   // you'll get something like this here:
   // {"target":1105,"layout":{"y":0,"width":256,"x":32,"height":54.5}}
}

render() {
    return (
        <View onLayout={(event) => {this.measureView(event)}} />
    );
}

measureView（事件：对象）{
log（`***事件：${JSON.stringify（event.nativeEvent）}`）；
//您将在此处看到类似的内容：
//{“目标”：1105，“布局”：{“y”：0，“宽度”：256，“x”：32，“高度”：54.5}
}
render（）{
返回(
{this.measureView（event）}}/>
);
}

您也可以使用requestAnimationFrame。我得到

未定义的不是对象（计算'this.refs'）

。发生了什么？您需要绑定measureProgressBar，this.measureProgressBar.bind（this）在视图上传递给

onLayout

的回调中只调用

measure

可能更有效。这是当前最好的解决方案。我使用的是React Native 0.50.4，不推荐使用字符串

ref

。此外，

View

的

measure

功能将不会返回有效数据，除非

onLayout

至少触发一次。事实上，有人可以告诉我ox、oy、width、height、px和py的具体含义？onLayout在某些情况下不会特别在Android上调用。这是正确的@umarfaroqawan，但是如果您设置

collapsable={false}

，它将始终测量。在Android中，如果没有可见的影响，一些视图将被删除。

var Time = React.createClass({
  getInitialState: function() {
    return({ progressMaxSize: 0 }); 
  },
  measureProgressBar: function() {
    this.progressBar.measure(this.setWidthProgressMaxSize);
  },
  setWidthProgressMaxSize: function(ox, oy, width, height, px, py) {
    this.setState({ progressMaxSize: width });
  },
  render: function() {
    return(
      <View style={listViewStyle.time} ref={(c) => { this.progressBar = c; } onLayout={this.measureProgressBar}>
        <View style={listViewStyle.progressBar} >
          <View style={[listViewStyle.progressMax, { width: this.state.progressMaxSize }]}/>
        </View>
      </View>
    );
  }
});

measureView(event: Object) {
   console.log(`*** event: ${JSON.stringify(event.nativeEvent)}`);
   // you'll get something like this here:
   // {"target":1105,"layout":{"y":0,"width":256,"x":32,"height":54.5}}
}

render() {
    return (
        <View onLayout={(event) => {this.measureView(event)}} />
    );
}