React-Native: measure a View

Question

Я пытаюсь измерить представление с помощью 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

В ночь некоторые ребята говорили о (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 }) 
); 
} 

Answer 2

Вы хотите измерить индикатор выполнения 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> 
    ); 
    } 
});