React Native使用ImagePicker触发Invalid hook call错误求助

你的代码本身没有在函数组件外部调用钩子，但仍出现该错误，大概率是依赖环境或库内部的问题，以下是具体排查方向和解决方案：

1. 验证依赖版本兼容性 #

react-native-image-crop-picker（或expo-image-picker）对React和React Native的版本有严格要求，版本不匹配会导致钩子运行上下文异常：

• 打开package.json，核对react、react-native与ImagePicker库的版本是否兼容（参考对应库的官方文档）。比如react-native-image-crop-picker v0.40.0+要求React Native 0.70以上版本。
• 如果版本不兼容，升级/降级到匹配的版本，例如：

  # 降级到兼容RN 0.69的image-crop-picker版本
  npm install react-native-image-crop-picker@0.39.0 --save
  

2. 检查重复的React实例 #

项目中存在多个React实例时，钩子会因为上下文不匹配触发错误：

• 执行命令查看依赖树中的React版本：

  npm ls react
  # yarn用户执行
  yarn list react
  

• 如果输出显示多个React条目（比如嵌套在某个依赖中的旧版本），执行以下操作：
  1. 删除node_modules文件夹和package-lock.json（或yarn.lock）
  2. 重新安装依赖：npm install/yarn install
  3. 若问题仍存在，在package.json中添加强制统一版本的配置：
     • npm用户添加overrides：

       "overrides": {
         "react": "^18.2.0" // 替换为你项目中的React版本
       }
       

     • yarn用户添加resolutions：

       "resolutions": {
         "react": "^18.2.0" // 替换为你项目中的React版本
       }
       

3. 排查库内部的钩子调用问题 #

部分版本的ImagePicker库可能存在内部错误调用钩子的bug：

• 尝试降级到该库的稳定版本（比如react-native-image-crop-picker的v0.38.x系列），测试是否还会触发错误。
• 查看该库的GitHub Issues页面，确认是否有其他用户遇到相同问题，以及是否有官方修复方案。

4. 简化代码排除干扰 #

将代码简化到最基础的形式，排除其他组件/逻辑的干扰：

import React from "react";
import { View, Pressable, Text } from "react-native";
import ImagePicker from "react-native-image-crop-picker";

export default function TestScreen() {
  async function pickImage() {
    try {
      const image = await ImagePicker.openPicker({
        width: 300,
        height: 400,
        cropping: true,
      });
      console.log(image);
    } catch (err) {
      console.error(err);
    }
  }

  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Pressable onPress={pickImage}>
        <Text>选择图片</Text>
      </Pressable>
    </View>
  );
}

如果简化版代码仍报错，可确定是环境/依赖问题；如果不报错，再逐步添加原有代码，定位具体的干扰项。

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