React-Native: bir görünüm ölçün

Question

Bir görüntüyü bir ref kullanarak ölçmeye çalışıyorum, ancak width döndürdü, 0 ekranda görüntülenen görseli görünse de (ve 0'a eşit olmaktan uzak) .

Bunu izlemeyi denedim: https://github.com/facebook/react-native/issues/953 ama sadece çalışmıyor ... Sadece Görünümün gerçek genişliğini almak istiyorum. Bazı adamlar (hacky) çözümü hakkında konuştuk Gece boyunca

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

ama, benim sorun çözüldü burada buldum: ilişkili

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

stilleri: Burada

benim kodudur https://github.com/facebook/react-native/issues/953

Temel olarak çözüm, setTimeout kullanmaktır ve her şey sadece sihirli bir şekilde çalışır:

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

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

Answer 2

onLayout ilerleme çubuğunu ölçmek istiyorsunuz.

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