react-native - 带有图像的 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 />的属性(property).一旦你这样做了，你几乎可以照常进行......

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

祝你好运! :)