使用react-native-image-crop-picker选图时报openPicker为null错误如何解决

报错核心原因 #

• react-native-image-crop-picker是依赖原生适配的库，不支持纯Expo托管项目，如果使用纯Expo创建的项目未弹出到原生层/未做自定义开发构建，会找不到原生绑定返回null，触发该报错。
• 如果你使用的是React Native裸项目/Expo自定义开发构建项目，未完成对应原生端的依赖配置，会导致模块原生绑定失效。
• 你的代码本身存在语法逻辑错误，也会影响功能正常运行。

修复步骤 #

第一步：项目类型适配 #

• 若为纯Expo托管项目：直接替换库为Expo官方适配的expo-image-picker，裁剪功能可搭配expo-image-manipulator实现，无需额外原生配置。
• 若为React Native裸项目/Expo自定义开发构建项目：继续执行后续原生配置步骤。

第二步：完成原生端依赖配置 #

• iOS端：进入项目ios目录执行pod install，同时在info.plist中添加相册、相机、麦克风（如需录视频）对应的权限申请描述。
• 安卓端：在android/app/src/main/AndroidManifest.xml中添加对应权限：

  <uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
  同时确认android/build.gradle中的minSdkVersion≥21。

第三步：修复代码语法错误 #

你当前使用的是函数组件，不可使用this绑定方法，也缺失了部分必要导入，修复后的参考代码如下：

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import ImagePicker from 'react-native-image-crop-picker';

export default function App() {
  // 函数组件内直接定义方法
  const pickImage = () => {
    // 从图库选图片使用openPicker，调相机拍摄使用openCamera
    ImagePicker.openPicker({
      mediaType: 'photo',
      cropping: true // 如需裁剪可开启
    }).then((res) => {
      console.log(res);
      // 函数组件使用useState存储返回数据，不要用this.setState
    }).catch(err => console.log(err));
  };

  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={pickImage}>
        <Text>Select Picture From Gallery</Text>
      </TouchableOpacity>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

第四步：清理缓存重新运行 #

执行命令清理缓存后重新启动项目：

• 清除打包缓存：npm start -- --reset-cache
• 安卓重新打包：npx react-native run-android
• iOS重新打包：npx react-native run-ios

内容的提问来源于stack exchange，提问作者doğan kısa