如何在React Native中使用expo-image-picker上传自定义尺寸图片

你当前代码强制出正方形裁剪结果有两个直接原因：

• 预览用的Image组件写死了宽高都是200，不管实际裁剪比例是多少，都会被拉伸成正方形显示
• expo-image-picker调用的是系统原生裁剪控件，不同安卓厂商对自定义aspect参数的适配不一致，部分机型会直接忽略传入的比例，默认锁1:1正方形裁剪，iOS端对比例参数的支持相对稳定。

基础适配：支持自定义固定比例裁剪 #

如果只需要固定比例裁剪（比如1:1、4:3、16:9这类比例，不需要自定义像素级尺寸），直接调整配置即可：

• 把裁剪比例抽成可配置的变量，不要硬编码aspect: [4,3]，aspect参数格式为[宽度占比, 高度占比]，比如要9:16竖屏比例就传[9,16]，要3:2就传[3,2]
• 预览图的尺寸要和裁剪比例匹配，不要写死宽高相等，避免拉伸变形

注意：aspect参数只有在allowsEditing: true时才会生效

进阶方案：完全自由自定义裁剪（支持任意尺寸/比例） #

如果需要实现像素级固定尺寸裁剪、自由拖拽裁剪框不锁比例这类更灵活的需求，系统自带的裁剪控件满足不了，需要换实现逻辑：

• 启动图片选择器时把allowsEditing设为false，关闭系统自带的裁剪界面，先拿到完整原图
• 拿到原图地址后，接入专门的图片裁剪组件，自行渲染裁剪交互界面，支持自定义裁剪框尺寸、比例、拖拽调整等功能
• 用户确认裁剪后，通过裁剪组件生成最终的图片地址，再做展示或上传逻辑

可直接运行的修改后代码 #

下面的代码实现了切换不同裁剪比例、预览图比例自适应的效果：

import React, { useState } from 'react';
import { Button, Image, View, TouchableOpacity, Text } from 'react-native';
import * as ImagePicker from 'expo-image-picker';

// 可自行增删需要的裁剪比例选项
const CROP_OPTIONS = [
  { label: '1:1 正方形', value: [1, 1] },
  { label: '4:3 标准比例', value: [4, 3] },
  { label: '16:9 宽屏比例', value: [16, 9] },
]

export default function ImagePickerExample() {
  const [image, setImage] = useState(null);
  const [selectedAspect, setSelectedAspect] = useState([4, 3]);

  const pickImage = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      allowsEditing: true,
      aspect: selectedAspect,
      quality: 1,
    });

    if (!result.cancelled) {
      setImage(result.uri);
    }
  };

  // 按裁剪比例计算预览高度，避免拉伸
  const previewWidth = 200;
  const previewHeight = previewWidth / (selectedAspect[0] / selectedAspect[1]);

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', gap: 20 }}>
      <View style={{ flexDirection: 'row', gap: 10 }}>
        {CROP_OPTIONS.map(option => (
          <TouchableOpacity
            key={option.label}
            onPress={() => setSelectedAspect(option.value)}
            style={{
              padding: 8,
              backgroundColor: (selectedAspect[0] === option.value[0] && selectedAspect[1] === option.value[1]) ? '#ddd' : '#f5f5f5',
              borderRadius: 4
            }}
          >
            <Text>{option.label}</Text>
          </TouchableOpacity>
        ))}
      </View>
      <Button title="从相机胶卷选择图片" onPress={pickImage} />
      {image && <Image source={{ uri: image }} style={{ width: previewWidth, height: previewHeight, resizeMode: 'cover' }} />}
    </View>
  );
}

内容的提问来源于stack exchange，提问作者Zoot Suit Productions