J'essaie de mesurer une vue à l'aide d'un ref
, mais le width
retourné est 0 malgré le fait que je vois la vue affichée à l'écran (et c'est loin d'être égal à 0) .
J'ai essayé de suivre ceci: https://github.com/facebook/react-native/issues/95 mais cela ne fonctionne tout simplement pas ... Je veux juste obtenir la largeur réelle du Vue.
Voici mon 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>
);
}
});
Les styles associés:
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,
},
Pendant la nuit, certains gars ont parlé d'une solution (hacky) mais cela a résolu mon problème, je l'ai trouvé ici: https://github.com/facebook/react-native/issues/95
Fondamentalement, la solution consiste à utiliser setTimeout
et tout fonctionne comme par magie:
componentDidMount: function() {
setTimeout(this.measureProgressBar);
},
measureProgressBar: function() {
this.refs.progressBar.measure((a, b, width, height, px, py) =>
this.setState({ progressMaxSize: width })
);
}
Pour mesurer la taille de la vue, pas besoin d'utiliser ref du tout. Vous pouvez l'obtenir à partir de nativeEvent passé par onLayout.
measureView(event: Object) {
console.log(`*** event: ${JSON.stringify(event.nativeEvent)}`);
// you'll get something like this here:
// {"target":1105,"layout":{"y":0,"width":256,"x":32,"height":54.5}}
}
render() {
return (
<View onLayout={(event) => {this.measureView(event)}} />
);
}
Vous voulez mesurer la barre de progression 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>
);
}
});