React-Native: misura a View

Question

Sto provando a misurare una vista utilizzando un ref, ma il width restituito è 0 nonostante il fatto che vedo la vista visualizzata sullo schermo (ed è lontana dall'essere uguale a 0) .

Ho provato a seguire questo: https://github.com/facebook/react-native/issues/953 ma semplicemente non funziona ... Voglio solo ottenere la larghezza effettiva della vista.

Ecco il mio codice:

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

Gli stili associati:

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

Durante la notte alcuni ragazzi hanno parlato di una soluzione (hacky), ma risolto il mio problema, l'ho trovato qui: https://github.com/facebook/react-native/issues/953

Fondamentalmente la soluzione è utilizzare setTimeout e tutto funziona perfettamente:

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

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

Answer 2

Si desidera misurare la barra di avanzamento 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> 
    ); 
    } 
});