onLayout与图像 - 反应本机
问题描述:
我有一个onLayout在图像中的问题: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>
你有想法为什么?
谢谢!
答
我最近也有这个问题。它看起来像<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%,网络图像通过该功能提供大小。
祝你好运! :)
Endeed,我完全改变了我的网络图像代码。但你的回答是对的! – Wandrille