web-dev-qa-db-ja.com

React-Native：ビューを測定する

refを使用してビューを測定しようとしていますが、画面に表示されているビューが表示されているにもかかわらず、返されるwidthは0です（0とはほど遠い）。 。

私はこれを試してみました： https://github.com/facebook/react-native/issues/95 しかし、それだけでは機能しません...実際の幅を取得したいだけです見る。

これが私のコードです：

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, 
  },
viewmeasurereact-native
13
ilansas

夜の間、何人かの人が（ハッキー）ソリューションについて話しましたが、それは私の問題を解決しました、ここでそれを見つけました： https://github.com/facebook/react-native/issues/95

基本的に、解決策はsetTimeoutを使用することであり、すべてが魔法のように機能します。

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

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

ビューサイズを測定するには、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)}} />
    );
}
8
nopopon

プログレスバーを測定したい 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>
    );
  }
});
8
AryanJ-NYC