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％，网络图像通过该功能提供大小。

祝你好运！ :)