使用React-Native Image-Picker时出现Cannot Read Property 'launchImageLibrary' of null错误求助

问题详情 #

使用react-native-image-picker组件时触发错误：Cannot Read Property 'launchImageLibrary' of null，操作及代码如下：

安装命令 #

npm i react-native-image-picker

代码示例 #

import {launchCamera,launchImageLibrary} from 'react-native-image-picker';
const openImageLibrary = () => {
    const options = {
        noData: true,
    };
        
    try{
        const result = launchImageLibrary(options)
    }
    catch(err)
    {
        console.log(err);
    }
}

解决方案 #

1. 适配版本API变更 #

react-native-image-picker v4+版本已修改API结构，不再直接导出launchCamera、launchImageLibrary，需使用launchImageLibraryAsync方法，正确导入方式：

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

如果使用旧版本，需确认项目RN版本与组件版本兼容，避免版本不匹配导致导出为空。

2. 确保依赖完整安装 #

• 删除现有依赖缓存后重新安装：

rm -rf node_modules package-lock.json
npm install

• iOS平台需执行原生依赖安装：

cd ios && pod install && cd ..

• Android平台可同步Gradle项目，确保原生链接完成（RN 0.60+自动链接，若仍有问题可手动检查settings.gradle和build.gradle配置）。

3. 配置必要权限 #

• Android：在AndroidManifest.xml中添加权限声明：

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.CAMERA" />

• iOS：在Info.plist中添加权限描述：

<key>NSPhotoLibraryUsageDescription</key>
<string>需要访问相册以选择图片</string>
<key>NSCameraUsageDescription</key>
<string>需要访问相机以拍摄图片</string>

4. 修复异步调用逻辑 #

launchImageLibrary（或新版本launchImageLibraryAsync）是异步方法，需用async/await处理：

const openImageLibrary = async () => {
    const options = {
        noData: true,
    };
        
    try{
        const result = await launchImageLibraryAsync(options);
        // 处理返回结果
    }
    catch(err)
    {
        console.log(err);
    }
}

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