React Native中Image.getSize异步问题：无法在return块获取计算后图片宽高

这个问题我之前也碰到过！核心原因就是Image.getSize是异步方法，你的return语句会在回调函数执行前就跑完，所以此时finalwidth和finalheight还没被赋值，自然是undefined（你没初始化变量，实际效果和null一致）。而回调里的alert能正常显示，是因为它要等图片尺寸获取完成后才会触发。

要解决这个问题，我们需要用React的状态管理来存储图片的宽高——当异步回调拿到尺寸后，更新组件状态，触发重新渲染，这样Image组件就能拿到正确的宽高值了。

下面分两种场景给你解决方案：

如果你用的是类组件 #

首先在组件的state里初始化一个对象，用来存储每个图片的尺寸（用图片的src作为key，避免多个图片互相干扰）：

state = {
  imageSizes: {} // 结构：{ [src]: { finalwidth: number, finalheight: number } }
};

然后修改你的renderNode函数：

renderNode(node, index, siblings, parent, defaultRenderer) {
  if (node.name === 'img') {
    const { src } = node.attribs;
    // 从state中获取当前图片的已计算尺寸
    const { finalwidth, finalheight } = this.state.imageSizes[src] || {};

    // 如果还没获取过该图片的尺寸，就调用Image.getSize
    if (!finalwidth || !finalheight) {
      Image.getSize(src, (width, height) => {
        const screenSize = Dimensions.get('window');
        const hRatio = screenSize.width / width;
        const vRatio = screenSize.height / height;
        const ratio = Math.max(hRatio, vRatio);
        
        const newWidth = parseInt(width * ratio);
        const newHeight = parseInt(height * ratio);

        // 更新state，存储当前图片的尺寸
        this.setState(prevState => ({
          imageSizes: {
            ...prevState.imageSizes,
            [src]: { finalwidth: newWidth, finalheight: newHeight }
          }
        }));
      }, (error) => {
        // 别忘了处理错误情况，比如图片加载失败
        console.error('获取图片尺寸失败:', error);
      });

      // 在获取到尺寸前，返回一个占位的Image（避免布局异常）
      return (
        <Image 
          key={index} 
          source={{ uri: src }} 
          resizeMode={'stretch'} 
          style={{ 
            width: '100%', // 临时占满屏幕宽度
            height: 200 // 设置一个默认高度，可根据需求调整
          }} 
        />
      );
    }

    // 已经拿到尺寸，返回正确样式的Image
    return (
      <Image 
        key={index} 
        source={{ uri: src }} 
        resizeMode={'stretch'} 
        style={{ 
          width: finalwidth,
          height: finalheight
        }} 
      />
    );
  }

  // 其他节点用默认渲染器处理
  return defaultRenderer(node, index, siblings, parent);
}

如果你用的是函数组件 #

用useState存储图片尺寸，useEffect触发异步获取操作：

import { useState, useEffect } from 'react';

// 初始化状态，存储所有图片的尺寸
const [imageSizes, setImageSizes] = useState({});

const renderNode = (node, index, siblings, parent, defaultRenderer) => {
  if (node.name === 'img') {
    const { src } = node.attribs;
    const { finalwidth, finalheight } = imageSizes[src] || {};

    // 当src或尺寸变化时，触发异步获取
    useEffect(() => {
      if (!finalwidth || !finalheight) {
        Image.getSize(src, (width, height) => {
          const screenSize = Dimensions.get('window');
          const hRatio = screenSize.width / width;
          const vRatio = screenSize.height / height;
          const ratio = Math.max(hRatio, vRatio);
          
          const newWidth = parseInt(width * ratio);
          const newHeight = parseInt(height * ratio);

          setImageSizes(prev => ({
            ...prev,
            [src]: { finalwidth: newWidth, finalheight: newHeight }
          }));
        }, (error) => {
          console.error('获取图片尺寸失败:', error);
        });
      }
    }, [src, finalwidth, finalheight]);

    // 占位渲染
    if (!finalwidth || !finalheight) {
      return (
        <Image 
          key={index} 
          source={{ uri: src }} 
          resizeMode={'stretch'} 
          style={{ width: '100%', height: 200 }} 
        />
      );
    }

    // 正确尺寸渲染
    return (
      <Image 
        key={index} 
        source={{ uri: src }} 
        resizeMode={'stretch'} 
        style={{ width: finalwidth, height: finalheight }} 
      />
    );
  }

  return defaultRenderer(node, index, siblings, parent);
};

为什么原来的代码不行？ #

简单来说：JavaScript的异步操作会被放到事件队列里，等同步代码执行完才会运行。你的return是同步代码，会在Image.getSize的回调执行前就完成，所以此时finalwidth和finalheight还是初始的未定义状态。而回调里的alert要等图片尺寸获取完成后才会触发，所以能拿到正确的值。

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