React-Native: đo Chế độ xem

Question

Tôi đang cố gắng đo lường chế độ xem bằng cách sử dụng ref, nhưng số width được trả về là 0 mặc dù thực tế là tôi thấy chế độ xem được hiển thị trên màn hình (và nó cách xa bằng 0) .

Tôi đã cố gắng làm theo: https://github.com/facebook/react-native/issues/953 nhưng nó không hoạt động ... Tôi chỉ muốn có chiều rộng thực tế của Chế độ xem.

Đây là mã của tôi:

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

Các phong cách liên quan:

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

Trong đêm một số kẻ nói về một (hacky) giải pháp nhưng nó giải quyết vấn đề của tôi, tìm thấy nó ở đây: https://github.com/facebook/react-native/issues/953

Về cơ bản, giải pháp là sử dụng setTimeout và mọi thứ hoạt động kỳ diệu:

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

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

Answer 2

Bạn muốn đo thanh tiến trình 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> 
    ); 
    } 
});