在React Native中使用react-native-image-picker如何压缩图片至指定尺寸与大小

开发者阿泽

2026-10-10

解决方案

方案说明

react-native-image-picker 本身内置了分辨率限制、质量压缩参数，无需额外引入第三方图片处理库，直接修改配置项即可满足需求：

配置maxWidth、maxHeight为1024：选中的图片会自动等比缩放到最长边不超过1024，不会拉伸变形
配置quality参数：调整JPG压缩质量，取值范围0~1，建议初始设为0.7，若压缩后仍超过900KB可适当下调
强制指定图片格式为JPG：避免PNG无损格式无法有效压缩体积

修改后的完整代码

import {launchImageLibrary} from 'react-native-image-picker';


const Upload = ({navigation}) => {
  const options = {
    title: 'Load Photo',
    customButtons: [
      {name: 'button_id_1', title: 'CustomButton 1'},
      {name: 'button_id_2', title: 'CustomButton 2'},
    ],
    storageOptions: {
      skipBackup: true,
      path: 'images',
    },
    // 新增压缩配置
    maxWidth: 1024,
    maxHeight: 1024,
    quality: 0.7,
    mediaType: 'photo',
    includeBase64: false, // 不需要base64的话关闭减少内存占用
  };


  const showCameraRoll = () => {
    launchImageLibrary(options, (response) => {
      if (response.error) {
        // 错误处理逻辑
        console.log('图片选择错误：', response.error);
        return;
      }
      if (response.didCancel) {
        // 用户取消选择处理
        return;
      }
      // 注意：新版react-native-image-picker返回的资源在assets数组中
      const asset = response.assets?.[0];
      if (!asset?.uri) return;

      setImageSource(asset.uri);
      const form = new FormData();
      form.append('image', {
        name: 'SampleFile.jpg',
        uri: asset.uri,
        type: asset.type || 'image/jpg',
      });
      // 后续上传逻辑
    });
  };
}