带有图像的 onLayout - React Native

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 />组件在实际图像加载到容器之前安装。你可能要改用onLoad的财产<Image />。一旦你这样做了，你几乎可以像往常一样继续......

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

祝你好运！:)