onLayout mit Bild - reagieren nativ

Question

Ich habe ein Problem mit onLayout in Bild:

Ich habe eine Funktion, um die Dimension anzuzeigen.

measureView(event) { 
    console.log(event.nativeEvent.layout.width); 
    console.log(event.nativeEvent.layout.height); 
} 

Dies funktioniert und zeigt mir die Dimension des TouchableWithoutFeedback

<TouchableWithoutFeedback 
style={styles.touchableWithoutFeedback} 
onLayout={(event) => this.measureView(event)}> 
    <Image style={styles.image} 
    source={require("./../assets/images/photo_1.jpg")}/> 
</TouchableWithoutFeedback> 

aber mit dem onLayout- im Bild, ich habe nichts, nur nicht definiert.

<TouchableWithoutFeedback 
style={styles.touchableWithoutFeedback}> 
    <Image style={styles.image} 
    source={require("./../assets/images/photo_1.jpg")} 
    onLayout={(event) => this.measureView(event)}/> 
</TouchableWithoutFeedback> 

Haben Sie eine Idee warum?

Danke!

Answer 1

Ich hatte dieses Problem in letzter Zeit auch. Es sieht so aus, als ob die Komponente <Image /> geladen wird, bevor das eigentliche Bild in den Container geladen wird. Wahrscheinlich möchten Sie stattdessen die onLoad-Eigenschaft von <Image /> verwenden. Sobald Sie tun, dass Sie ziemlich normal gehen kann ...

<Image 
    onLoad={event => { console.log(event.nativeEvent.source); }} 
    source={require("./../assets/images/photo_1.jpg")} 
    style={styles.image} 
/> 

// Would log { height: 123, url: 'somestring', width: 123 } 

Denken Sie daran, dass nicht nur für statische Ressourcen arbeiten können oder nicht. Ich bin nicht 100%, dass Netzwerkbilder eine Größe durch diese Funktion zur Verfügung stellen.

Viel Glück! :)