DrawerNavigator内TouchableOpacity调用useNavigation报错

核心触发原因是违反了React Hooks的基础调用规则：
你定义的navToLogin是普通JavaScript函数，既不是React函数组件，也不是自定义Hook，在这个函数内部调用useNavigation()本身就不符合Hooks调用要求；同时这个函数是在onPress事件回调触发时才执行，执行时机完全不在React组件的渲染上下文里，必然抛出Invalid hook call错误。

二选一即可：

方案1：在组件顶层正确调用useNavigation #

删除你单独定义的navToLogin普通函数，把useNavigation的调用移动到NestedTabBar函数组件的顶层作用域，先拿到navigation实例，再在事件回调里调用跳转方法：

// 删除原有错误的navToLogin函数定义
const NestedTabBar = props => {
  // Hook必须在函数组件顶层调用，拿到navigation实例
  const navigation = useNavigation();
  return (
  <>
    <TouchableOpacity
      style={stl.itemNav}
      onPress={
        () => {
          navigation.navigate('Login');
        }
    } >
      <Text>[NavigateToLogin]</Text>
    </TouchableOpacity>
  </>
  );
}

方案2：直接使用透传的navigation属性 #

你在配置headerTitle时已经通过{...props}把导航相关属性透传给了自定义头部组件，这些props本身就包含navigation实例，不需要额外调用useNavigation，直接从props取值即可：

// 删除原有错误的navToLogin函数定义
const NestedTabBar = props => {
  return (
  <>
    <TouchableOpacity
      style={stl.itemNav}
      onPress={
        () => {
          // 直接从透传的props中取navigation对象
          props.navigation.navigate('Login');
        }
    } >
      <Text>[NavigateToLogin]</Text>
    </TouchableOpacity>
  </>
  );
}

所有React Hook（包含React Navigation提供的useNavigation这类封装Hook），只能在React函数组件、自定义Hook的最顶层作用域调用，禁止在普通工具函数、条件分支、循环、事件回调内部直接调用Hook。

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