React Native调用Image.getSize()致应用无报错崩溃如何解决

不是Image.getSize()本身导致的崩溃，是你的代码存在几个会直接触发原生层崩溃的问题，这类原生层崩溃通常不会输出JS层错误码。

• 初始状态类型不匹配：你给width、height设置的初始值是空字符串''，属于字符串类型，但ImageZoom组件的imageWidth、imageHeight属性要求传入数值类型。Image.getSize是异步方法，组件第一次渲染时拿到的尺寸值是空字符串，组件内部做尺寸计算时会拿字符串参与算术运算，直接触发原生层崩溃。
• 缺少错误处理逻辑：Image.getSize的第三个参数是失败回调，当图片链接无效、网络权限未开启、资源加载失败时会触发该回调。你没有实现失败逻辑，一旦加载失败，尺寸状态会一直保持空字符串，组件始终拿不到合法的数值参数。
• 没有加载兜底逻辑：图片尺寸获取完成前你就直接渲染了ImageZoom组件，没有做加载态判断，等于组件挂载瞬间就拿到了非法参数。
• 额外性能问题：你把Image.getSize直接写在了组件函数根作用域，每次组件重渲染都会重复执行该方法，可能导致状态反复更新，触发死循环。

按如下逻辑调整即可解决崩溃问题：

import { View, Image, ActivityIndicator } from 'react-native';

// 尺寸初始值设为null，不要用空字符串
const [width, setWidth] = useState(null);
const [height, setHeight] = useState(null);

// 异步方法放到useEffect中执行，避免重复调用
useEffect(() => {
  Image.getSize(
    link,
    (w, h) => {
      setWidth(w);
      setHeight(h);
    },
    (err) => {
      // 加载失败时设置默认尺寸兜底，避免状态为空
      console.error('图片尺寸获取失败：', err);
      setWidth(dev_width);
      setHeight(dev_width);
    }
  )
}, [link]); // 图片链接变化时重新获取尺寸

// 尺寸未就绪时渲染加载占位
if (!width || !height) {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <ActivityIndicator size="large" />
    </View>
  )
}

return (
  <View>
    <ImageZoom
      cropWidth={dev_width}
      cropHeight={dev_height}
      imageWidth={width}
      imageHeight={height}
      enableCenterFocus={false}
      style={{
        flex: 1,
        justifyContent: 'center'
      }}
    >
      <Image
        source={{uri: link}}
        style={{
          width: 4/5 * dev_width,
          aspectRatio: width / height, // 用实际获取的宽高比替换写死的0.3，避免图片变形
          resizeMode: "contain",
          alignSelf:'center'
        }}
      />
    </ImageZoom>
  </View>
)

后续写React Native代码时注意两点，能避免80%这类无报错崩溃：

• 给原生组件、第三方原生封装组件传参时，严格匹配文档要求的参数类型，数值类型参数不要传入字符串、null、undefined这类非预期值，原生层拿到类型错误的参数大概率会直接崩溃，且不会抛出JS层可捕获的错误。
• 所有涉及网络请求、本地资源读取的异步API，必须同时写成功回调和失败回调，网络异常、资源失效是高频场景，不能假设接口/资源一定会正常返回。

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