onLayout與圖像 - 反應本機

Question

我有一個onLayout在圖像中的問題：

我有一個函數來顯示維度。

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

這工作，並顯示我的TouchableWithoutFeedback

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

但隨着onLayout在圖像尺寸，我什麼也沒得到，只是不確定。

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

你有想法爲什麼？

謝謝！

Answer 1

我最近也有這個問題。它看起來像<Image />組件在將實際圖像加載到容器之前安裝。您可能想改爲使用<Image />的onLoad財產。一旦你這樣做，你幾乎可以像往常一樣繼續......

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

請記住，可能會或可能不會只適用於靜態資源。我不是100％，網絡圖像通過該功能提供大小。

祝你好運！ :)