React-Nativ: messen Sie eine Ansicht

Question

Ich versuche, eine Ansicht zu messen, um ein ref verwenden, aber die width zurück 0 trotz der Tatsache, dass ich die Ansicht auf dem Bildschirm angezeigt zu sehen (und es ist weit von gleich 0 ist) .

Ich habe versucht, dies zu folgen: https://github.com/facebook/react-native/issues/953, aber es funktioniert einfach nicht ... Ich möchte nur die tatsächliche Breite der Ansicht erhalten.

Hier ist mein Code:

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

Die Stile verbunden:

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

In der Nacht einige Leute über eine (hacky) Lösung gesprochen, aber es mein Problem gelöst, fand es hier: https://github.com/facebook/react-native/issues/953

Grundsätzlich ist die Lösung zu verwenden setTimeout und alles funktioniert magisch:

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

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

Answer 2

Sie möchten den Fortschrittsbalken onLayout messen.

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