React Native 0.7/0.71：获取网络图片实际尺寸的问题

一、先解决onLoad系列事件不触发的问题 #

• 检查事件属性名是否为驼峰式：确保是onLoad/onLoadStart/onLoadEnd，不要写成小写或其他格式
• 验证图片URL的可访问性：如果图片加载失败，事件自然不会触发，可添加onError事件排查具体错误信息
• 排查resizeMode设置：部分React Native版本中，resizeMode="repeat"会导致事件不触发，换成cover或contain尝试

二、获取图片原始尺寸的正确方式 #

方式1：利用Image.resolveAssetSource #

调用Image.resolveAssetSource方法，传入图片源即可获取包含原始宽高的对象：

import { Image } from 'react-native';

const getOriginalImageSize = (imageUrl) => {
  const asset = Image.resolveAssetSource({ uri: imageUrl });
  console.log('图片原始尺寸：', asset.width, asset.height);
  return { width: asset.width, height: asset.height };
};

注意：网络图片需确保已被缓存，否则可能返回0，建议在onLoad事件触发后调用该方法。

方式2：通过onLoad事件的nativeEvent获取 #

当onLoad事件正常触发时，事件参数的nativeEvent.source里直接包含原始尺寸：

<Image
  source={{ uri: '你的网络图片地址' }}
  onLoad={(event) => {
    const { width, height } = event.nativeEvent.source;
    console.log('图片原始尺寸：', width, height);
  }}
  onError={(error) => console.log('图片加载失败：', error)}
/>

方式3：使用第三方库辅助 #

如果原生方法受限，可借助react-native-image-size库直接通过URL获取尺寸：

npm install react-native-image-size --save

import ImageSize from 'react-native-image-size';

const fetchImageSize = async () => {
  try {
    const { width, height } = await ImageSize.getSize('你的网络图片地址');
    console.log('图片原始尺寸：', width, height);
  } catch (err) {
    console.error('获取尺寸失败：', err);
  }
};

内容的提问来源于stack exchange，提问作者Ritvik Aggarwal