React Native绑定Hooks组件触发Invalid hook call报错如何解决

报错的核心原因是你违反了React Hooks的基础调用规则：所有Hooks只能在React函数组件的顶层渲染上下文、或自定义Hook的顶层执行。
你把写了useState、useEffect的React函数组件InAppCamera直接当成普通事件回调传给了FAB的onPress属性。点击按钮时，InAppCamera会作为普通函数被直接调用，完全没有走React的组件渲染调度流程，组件内部的Hooks找不到对应的React组件上下文、Hook存储队列，直接触发Hooks合法性校验，抛出Invalid hook call错误。
你写的InAppCamera组件本身逻辑没有硬伤，问题完全出在组件的使用方式上。

按以下步骤调整即可解决问题：

• 不要把函数组件直接传给事件回调。React函数组件必须通过JSX标签形式写入渲染树，由React调度渲染，不能当成普通工具函数、事件处理器手动执行。
• 新增显隐状态控制相机组件的展示，实现点击FAB唤起相机的交互，参考父组件正确写法：

import React, { useState } from 'react';
import { Modal, TouchableOpacity, Text, View, StyleSheet } from 'react-native';
// 导入你写的相机组件
import InAppCamera from './InAppCamera';

// 父组件内定义状态
const [isCameraOpen, setIsCameraOpen] = useState(false);

// FAB组件的正确写法，点击只修改显隐状态
<FAB 
  style={styles.fab} 
  small 
  icon="camera" 
  onPress={() => setIsCameraOpen(true)} 
/>

// 在父组件的渲染结构中挂载相机组件，一般搭配Modal做全屏弹窗承载
{isCameraOpen && (
  <Modal visible={isCameraOpen} animationType="slide">
    <View style={{flex: 1}}>
      <InAppCamera />
      {/* 增加相机关闭入口 */}
      <TouchableOpacity 
        style={styles.closeBtn}
        onPress={() => setIsCameraOpen(false)}
      >
        <Text style={styles.closeText}>关闭相机</Text>
      </TouchableOpacity>
    </View>
  </Modal>
)}

• 清理InAppCamera组件的冗余导入：你当前代码里从react导入了Component但全程没有使用类组件相关逻辑，可以直接删掉这个无用导入，减少不必要的打包冗余。

只要是依赖Hooks实现的React函数组件，只有两种合法调用场景：一是作为JSX标签写入渲染树由React调度渲染，二是作为自定义Hook被其他合法的React上下文调用。任何手动把组件当普通函数执行的写法，都会触发Hooks调用报错。

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