React Native获取多张图片尺寸及解决Image.getSize异步值未获取问题

问题原因 #

Image.getSize()是异步方法，它不会阻塞后续代码执行。你在方法外打印imageHeight时，回调函数还没完成赋值操作，所以变量还是初始的undefined；组件渲染时也会直接使用未赋值的imageHeight，导致无法应用正确的高度值。

解决方案 #

方案1：用状态管理单张图片高度 #

通过useState保存每张图片的计算后高度，在Image.getSize的回调中更新状态，触发组件重新渲染：

import { useState } from 'react';
// ...其他必要导入

const YourComponent = () => {
  // 用对象存储每张图片的高度，key为图片索引或url
  const [imageHeights, setImageHeights] = useState({});
  const screenWidth = Dimensions.get('screen').width;

  return (
    <ScrollView style={[styles.container, {backgroundColor: theme.background}]}>
      <TouchableOpacity activeOpacity={1} onPress={() => console.log('Pressed')}>
        {pages && pages.map((page, index) => {
          const url = page; // 替换为实际图片链接
          const currentHeight = imageHeights[index];

          // 首次渲染时获取图片尺寸
          if (!currentHeight) {
            Image.getSize(url, (width, imgHeight) => {
              const calculatedHeight = (imgHeight * screenWidth) / width;
              setImageHeights(prev => ({ ...prev, [index]: calculatedHeight }));
            }, (error) => {
              console.error('获取图片尺寸失败:', error);
              // 加载失败时设置默认高度
              setImageHeights(prev => ({ ...prev, [index]: 650 }));
            });
          }

          return (
            <Image
              source={{ uri: url }}
              style={[styles.images, { height: currentHeight || 650 }]}
              key={index}
              resizeMode="contain" // 根据需求调整图片适配模式
            />
          );
        })}
      </TouchableOpacity>
    </ScrollView>
  );
};

方案2：利用Image组件的onLoad事件 #

直接在Image组件的onLoad回调中获取图片尺寸，无需额外调用Image.getSize，代码更简洁：

import { useState } from 'react';
// ...其他必要导入

const YourComponent = () => {
  const [imageHeights, setImageHeights] = useState({});
  const screenWidth = Dimensions.get('screen').width;

  const handleImageLoad = (e, index) => {
    const { width, height } = e.nativeEvent.source;
    const calculatedHeight = (height * screenWidth) / width;
    setImageHeights(prev => ({ ...prev, [index]: calculatedHeight }));
  };

  return (
    <ScrollView style={[styles.container, {backgroundColor: theme.background}]}>
      <TouchableOpacity activeOpacity={1} onPress={() => console.log('Pressed')}>
        {pages && pages.map((page, index) => {
          const url = page;
          const currentHeight = imageHeights[index];

          return (
            <Image
              source={{ uri: url }}
              style={[styles.images, { height: currentHeight || 650 }]}
              key={index}
              resizeMode="contain"
              onLoad={(e) => handleImageLoad(e, index)}
            />
          );
        })}
      </TouchableOpacity>
    </ScrollView>
  );
};

方案3：批量预加载所有图片尺寸（适合图片数量较少的场景） #

在组件挂载时批量获取所有图片的尺寸，统一存入状态后再渲染图片：

import { useState, useEffect } from 'react';
// ...其他必要导入

const YourComponent = () => {
  const [imageHeights, setImageHeights] = useState([]);
  const screenWidth = Dimensions.get('screen').width;

  useEffect(() => {
    if (!pages) return;
    
    const fetchAllHeights = async () => {
      const heights = [];
      for (const url of pages) {
        try {
          const [width, height] = await new Promise((resolve, reject) => {
            Image.getSize(url, resolve, reject);
          });
          heights.push((height * screenWidth) / width);
        } catch (error) {
          console.error('获取图片尺寸失败:', error);
          heights.push(650); // 加载失败时用默认高度
        }
      }
      setImageHeights(heights);
    };

    fetchAllHeights();
  }, [pages]);

  return (
    <ScrollView style={[styles.container, {backgroundColor: theme.background}]}>
      <TouchableOpacity activeOpacity={1} onPress={() => console.log('Pressed')}>
        {pages && pages.map((page, index) => {
          const url = page;
          const currentHeight = imageHeights[index] || 650;

          return (
            <Image
              source={{ uri: url }}
              style={[styles.images, { height: currentHeight }]}
              key={index}
              resizeMode="contain"
            />
          );
        })}
      </TouchableOpacity>
    </ScrollView>
  );
};

注意事项 #

• 必须处理Image.getSize的错误回调，避免图片加载失败导致状态无法更新。
• 设置默认高度（如示例中的650），防止首次渲染时图片高度为0。
• 根据业务需求选择合适的resizeMode，确保图片显示效果符合预期。

内容的提问来源于stack exchange，提问作者Shilajit Dutta