React-Native:测量视图

Question

我正在尝试使用a来测量视图ref,但是width返回的是0,尽管我看到屏幕上显示的视图(并且它远不等于0).

我试图遵循这个:https://github.com/facebook/react-native/issues/953但它只是不起作用...我只想获得视图的实际宽度.

这是我的代码:

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>
    );
  }
}); 

相关的风格:

time: {
    position: 'absolute',
    bottom: 5,
    left: 5,
    right: 5,
    backgroundColor: '#325436',
    flexDirection: 'row',
  },
  progressBar: {
    flex: 1,
    backgroundColor: '#0000AA',
  },
  progressMax: {
    position: 'absolute',
    top: 0,
    left: 0,
    backgroundColor: '#000',
    height: 30, 
  },

Answer 1

您想要衡量进度条onLayout.

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>
    );
  }
});

Answer 2

要测量视图大小,根本不需要使用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)}} />
    );
}

Answer 3

在夜间,一些人讨论了一个(hacky)解决方案,但它解决了我的问题,在这里找到它:https://github.com/facebook/react-native/issues/953

基本上解决方案是使用setTimeout,一切都只是神奇地工作:

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

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