React Native Image Picker无法显示图片问题求助

核心问题 #

1. 拼写错误：storageOptions里的skinBackup是笔误，正确参数名是skipBackup，这会导致存储配置异常。
2. 新版Image Picker返回结构变更：当前版本的react-native-image-picker（v5+）中，相机返回的图片信息不再直接挂载在res.uri，而是放在res.assets数组的第一个元素里。
3. 未更新组件状态：拿到图片URI后没有调用setPhoto更新state，导致Image组件无法获取到数据源。
4. 无效的async/await使用：launchCamera的回调版本不返回Promise，所以await在这里不起作用。

修正后的完整代码 #

1. 修正配置与相机调用函数

import { useState } from 'react';
import { launchCamera } from 'react-native-image-picker';

const [photo, setPhoto] = useState(null); // 初始值设为null，避免空字符串的渲染问题

const options = {
  title: "pick an image",
  storageOptions: {
    skipBackup: true, // 修正拼写错误
    path: 'images'
  }
};

// 回调版本
const openCamera = () => {
  launchCamera(options, (res) => {
    if (res.didCancel) {
      console.log("canceled");
    } else if (res.error) {
      console.log("err:", res.error); // 打印具体错误信息便于排查
    } else if (res.customButton) {
      console.log("cstm btn");
    } else {
      // 从assets数组中取第一个图片的URI
      const imageUri = res.assets[0].uri;
      const source = { uri: imageUri };
      console.log("Imagesource=", JSON.stringify(source));
      setPhoto(source); // 更新state，触发Image组件渲染
    }
  });
};

// 或者用Promise版本（更推荐，支持async/await）
const openCamera = async () => {
  try {
    const res = await launchCamera(options);
    if (res.didCancel) {
      console.log("canceled");
    } else if (res.error) {
      console.log("err:", res.error);
    } else if (res.customButton) {
      console.log("cstm btn");
    } else {
      const imageUri = res.assets[0].uri;
      const source = { uri: imageUri };
      console.log("Imagesource=", JSON.stringify(source));
      setPhoto(source);
    }
  } catch (err) {
    console.log("Camera error:", err);
  }
};

2. 修正Image组件渲染逻辑

<ScrollView style={styles.postContent}>
  {photo && (
    <Image
      source={photo}
      style={{ height: 300, width: 300 }}
      resizeMode="contain" // 可选，保证图片比例不拉伸
    />
  )}
</ScrollView>

额外检查项 #

• 权限配置：确保已添加相机权限
  • iOS：在Info.plist中添加NSCameraUsageDescription（描述相机使用目的）
  • Android：在AndroidManifest.xml中添加<uses-permission android:name="android.permission.CAMERA" />

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