react-native-image-picker报错：Cannot read property 'launchImageLibrary' of null求解决

问题详情 #

调用react-native-image-picker的launchImageLibrary方法时触发TypeError: Cannot read property 'launchImageLibrary' of null错误，无法打开图片选择相册。相关代码如下：

<Button
    onPress={() =>
      ImagePicker.launchImageLibrary(
       {
        mediaType: 'photo',
        includeBase64: false,
        maxHeight: 200,
        maxWidth: 200,
       },
        response => {
           console.log(response);
           setPhoto(response);
          },
        )
     }
       title="Select Image"
/>

已尝试清理依赖重装、修改导入方式，但均未解决问题。

可行解决方案 #

1. 检查并更新react-native-image-picker版本 #

旧版本API存在兼容性问题，先查看当前版本：

npm list react-native-image-picker

若版本低于v4.x，建议升级到最新稳定版：

npm install react-native-image-picker@latest

注意：v4.x版本起API有重大变更，launchImageLibrary改为异步方法，需配合async/await使用，且需要正确初始化配置。

2. 适配新版本API写法 #

升级到v4.x后，修改调用逻辑为异步形式：

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

const handleSelectImage = async () => {
  const options = {
    mediaType: MediaTypeOptions.Photo,
    includeBase64: false,
    maxHeight: 200,
    maxWidth: 200,
  };

  const result = await launchImageLibrary(options);
  
  if (!result.didCancel) {
    console.log(result);
    setPhoto(result);
  }
};

// 按钮调用
<Button onPress={handleSelectImage} title="Select Image" />

3. 配置平台权限 #

权限缺失会导致模块初始化失败，需在对应平台配置权限：

• 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" />
  

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

  <key>NSPhotoLibraryUsageDescription</key>
  <string>需要访问您的相册以选择图片</string>
  

4. 确认原生模块链接（仅RN < 0.60版本） #

若你的React Native版本低于0.60，需手动链接原生模块：

react-native link react-native-image-picker

链接完成后重新编译项目。

5. 清理缓存并重新编译 #

缓存问题可能导致模块加载异常，执行以下命令清理后重新运行：

# 重置React Native缓存
npx react-native start --reset-cache

# Android项目清理
cd android && ./gradlew clean && cd ..

# iOS项目清理
cd ios && pod deintegrate && pod install && cd ..

# 重新运行项目
npx react-native run-android # 或 npx react-native run-ios

内容的提问来源于stack exchange，提问作者Jason Byron Beedle