React Native使用react-native-image-resizer调整图片大小报TypeError错误

1. 核心报错原因定位 #

该报错本质是react-native-image-resizer的安卓原生模块没有被正确加载，或调用方式不符合要求，按以下步骤逐一排查即可解决：

2. 排查步骤 #

2.1 确认运行环境匹配 #

从你给出的uri带host.exp.exponent可以判断你当前使用Expo Go运行项目：

• react-native-image-resizer包含原生代码，不支持在Expo Go环境中直接运行
• 如果你不想 eject 到纯原生React Native项目，直接替换为Expo官方支持的expo-image-manipulator库即可实现相同的图片压缩功能，示例代码如下：

import * as ImageManipulator from 'expo-image-manipulator';

// 图片压缩调用示例
const compressImage = async (uri) => {
  const res = await ImageManipulator.manipulateAsync(
    uri,
    [{ resize: { width: 1080, height: 1920 } }], // 按自己的需求调整宽高
    { compress: 0.6, format: ImageManipulator.SaveFormat.JPEG }
  );
  return res.uri;
}

2.2 原生项目排查（非Expo环境） #

如果你使用的是纯原生React Native项目：

• 0.60版本以下需手动执行链接命令：react-native link react-native-image-resizer，链接完成后必须重新编译安卓安装包再运行，不能直接刷新JS bundle
• 0.60及以上自动链接版本，检查android/app/src/main/java/[你的包名]/MainApplication.java中是否已经自动注册了ImageResizer原生模块，未注册的话手动补全注册代码
• 确认安卓清单文件AndroidManifest.xml已经配置读写存储权限：

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

安卓13及以上版本还需要额外申请图片读取专属权限。

2.3 调用参数修正 #

你当前的调用代码参数顺序错误，createResizedImage的参数顺序为(路径, 最大宽度, 最大高度, 压缩格式, 质量, 旋转角度)，你把height放到了width的前面，会导致参数解析异常，修正后的调用示例：

ImageResizer.createResizedImage(photo.uri, width, height, "JPEG", 60, 0).then(
  (response) => {
     console.log(response);
  }).catch(err => {
     // 补充异常捕获避免闪退
     console.log('压缩失败', err)
  });

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