React Native中CameraRoll Undefined错误求助

看起来你遇到的这个TypeError: Cannot read property 'CameraRoll' of undefined错误，大概率是因为导入方式不对，毕竟现在@react-native-camera-roll/camera-roll已经是独立的第三方库，不再是React Native的内置模块了，我帮你梳理几个最可能的解决方向：

1. 检查导入语句（最常见的问题） #

很多开发者习惯了旧版React Native内置CameraRoll的导入方式：

import { CameraRoll } from 'react-native'; // ❌ 这是旧写法，现在不适用了

而你用的@react-native-camera-roll/camera-roll需要从包本身导入：

import { CameraRoll } from '@react-native-camera-roll/camera-roll'; // ✅ 正确写法

2. 确认库已正确安装与链接 #

如果导入没问题，那可能是安装过程中出了问题：

• 先确保你已经正确安装了库：

  # npm 安装
  npm install @react-native-camera-roll/camera-roll --save
  # 或者 yarn 安装
  yarn add @react-native-camera-roll/camera-roll
  

• iOS平台需要额外执行pod安装：

  cd ios && pod install && cd ..
  

• React Native 0.60+支持自动链接，所以不需要手动配置Android的链接，但如果还是有问题，可以尝试清理项目缓存后重新构建。

3. 清理缓存并重启项目 #

有时候缓存会导致模块无法正确识别，试试这些步骤：

• 关闭Metro服务，然后用缓存重置命令重启：

  npx react-native start --reset-cache
  

• 重启你的模拟器/真机
• 重新构建项目：

  # iOS 平台
  npx react-native run-ios
  # Android 平台
  npx react-native run-android
  

4. 权限配置（虽不是直接导致undefined的原因，但后续获取图片必备） #

如果前面的步骤解决了undefined问题，但后续无法获取图片，记得配置权限：

• iOS：在ios/[你的项目名]/Info.plist中添加：

  <key>NSPhotoLibraryUsageDescription</key>
  <string>需要访问您的相册以展示图片</string>
  <key>NSPhotoLibraryAddUsageDescription</key>
  <string>需要访问您的相册以保存图片</string>
  

• Android：在android/app/src/main/AndroidManifest.xml中添加：

  <!-- Android 12及以下版本 -->
  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
  <!-- Android 13+ 推荐使用这个权限 -->
  <uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
  

附：正确的fetchGallery函数示例 #

给你一个简单的示例参考，确保调用方式正确：

import { CameraRoll } from '@react-native-camera-roll/camera-roll';

const fetchGallery = async () => {
  try {
    // 先获取20张图片测试，可根据需求调整first参数
    const result = await CameraRoll.getPhotos({
      first: 20,
      assetType: 'Photos', // 指定只获取照片，也可以选'All'或'Videos'
    });
    const galleryImages = result.edges.map(item => item.node.image.uri);
    console.log('成功获取到相册图片:', galleryImages);
    // 这里可以把galleryImages设置到你的状态中，用于UI展示
  } catch (error) {
    console.error('Error fetching gallery images:', error);
  }
};

内容来源于stack exchange