React Native使用ImagePicker打开相册失败，触发类型错误

问题描述 #

点击「Photos」按钮调用react-native-image-picker打开相册时触发报错，错误信息：

[Unhandled promise rejection: TypeError: null is not an object (evaluating '_reactNative.NativeModules.ImagePickerManager.launchImageLibrary')]

相关实现代码：

//I was not able to open the gallery by using the react native image picker

import React, { useState } from 'react'
import { launchCamera, launchImageLibrary } from 'react-native-image-picker'
import * as ImagePicker from 'react-native-image-picker'
import { StyleSheet,Text,View,TouchableOpacity,Dimensions,Pressable,} from 'react-native'
import { TextInput } from 'react-native-gesture-handler'
    
const WIDTH = Dimensions.get('window').width
const HEIGHT_Modal = 250
    
const UploadModal = ({ changeModalVis }) => {
    const [response, setResponse] = useState(null)
    console.log('res', response)
    
    const closeModal = (bool, data) => {
        changeModalVis(bool)
    }
    
    const options = {
        title: 'Select Image',
        type: 'library',
        options: {
            selectionLimit: 1,
            mediaType: 'photo',
            includeBase64: false,
        },
    }
    
    const openGallery = () => {
        ImagePicker.launchImageLibrary(options, setResponse)
    }

    //render .....................................................

    return (
        <TouchableOpacity disabled={true} style={styles.container}>
            <View style={styles.modal}>
                <View style={styles.textView}>
                    <Text
                        style={{
                            fontSize: 13,
                            padding: 10,
                            fontWeight: 'bold',
                            color: '#9b9e9e',
                        }}
                    >
                        Choose an option
                    </Text>
                    
                    <TouchableOpacity style={styles.pressableUpperBody}>
                        <Text style={styles.text} onPress={openGallery}>  <------error on press
                            Photos
                        </Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={styles.pressableUpperBody}>
                        <Text style={styles.text}>Capture Image</Text>
                    </TouchableOpacity>
                </View>

                <View style={styles.pressableUpperBody}>
                    <TouchableOpacity
                        style={styles.pressable}
                        onPress={() => closeModal(false, 'cancel')}
                    >
                        <Text style={styles.text}>Cancel</Text>
                    </TouchableOpacity>
                </View>
            </View>
        </TouchableOpacity>
    )
}

export default UploadModal

解决方案 #

1. 检查依赖安装与缓存 #

• 确保依赖正确安装：执行npm install react-native-image-picker --save或yarn add react-native-image-picker
• React Native 0.60+会自动链接依赖，低于该版本需手动执行react-native link react-native-image-picker
• 重启Metro服务并清除缓存：npx react-native start --reset-cache

2. 修正API调用方式 #

新版本react-native-image-picker使用Promise风格API，且配置项格式有变化，同时避免重复导入：

// 只保留单种导入方式
import { launchImageLibrary } from 'react-native-image-picker';

// 修正配置项结构
const options = {
  mediaType: 'photo',
  selectionLimit: 1,
  includeBase64: false,
};

// 改用Promise调用并处理错误
const openGallery = async () => {
  try {
    const result = await launchImageLibrary(options);
    if (!result.didCancel) {
      setResponse(result);
    }
  } catch (error) {
    console.error('打开相册失败:', error);
  }
};

3. 配置原生权限 #

• iOS：在Info.plist中添加相册访问权限，然后执行npx pod-install ios

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

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

  <!-- 适配Android 12及以下 -->
  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
  <!-- 适配Android 13+ -->
  <uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
  

4. 修复组件嵌套问题 #

最外层TouchableOpacity设置了disabled={true}，可能导致事件传递异常，改为View：

return (
  <View style={styles.container}>
    {/* 内部原有内容保持不变 */}
  </View>
)

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