React Native类组件调用useNavigation报无效Hook错误如何解决

useNavigation是React Hook，按照React的规则，Hook只能在函数组件、自定义Hook的顶层调用，类组件里根本不支持直接调用Hook，你在class类体里写const navigation= useNavigation()从根上就不符合Hook使用规范，肯定报无效Hook错误。另外你写的render方法返回了两个并列的根元素，没有外层容器包裹，这部分也会触发编译/运行错误。

方案1：直接从props取navigation（优先使用，最简单无额外依赖） #

如果你的Mpin组件是直接配在导航栈里的页面（也就是你写过类似<Stack.Screen name="Mpin" component={Mpin} />的配置），React Navigation会自动把navigation对象注入到组件props里，根本不需要额外调用Hook，直接通过this.props访问即可。
修正后可直接运行的代码：

import React, { Component } from 'react';
import { Text, View, TouchableOpacity } from 'react-native';

class Mpin extends Component {
  render() {
    // 直接从props获取框架注入的navigation实例
    const { navigation } = this.props;
    return (
      // 补外层根容器，解决多节点并列报错问题
      <View style={{flex: 1}}>
        <Text>....</Text>
        <TouchableOpacity onPress={() => navigation.navigate('LoginPage')}>
            <Text>SetMPIN</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

export default Mpin;

方案2：嵌套子组件用withNavigation高阶组件包裹 #

如果Mpin不是导航栈直接注册的页面，是页面里嵌套的普通子组件，拿不到上层自动注入的navigation，就用官方提供的withNavigation高阶组件把你的类组件包一层，包裹之后props里会自动带上navigation对象，使用方式和方案1完全一致。
代码示例：

import React, { Component } from 'react';
import { Text, View, TouchableOpacity } from 'react-native';
// 导入类组件适配用的高阶组件
import { withNavigation } from '@react-navigation/native';

class Mpin extends Component {
  render() {
    const { navigation } = this.props;
    return (
      <View style={{flex: 1}}>
        <Text>....</Text>
        <TouchableOpacity onPress={() => navigation.navigate('LoginPage')}>
            <Text>SetMPIN</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

// 用高阶组件包裹后再导出
export default withNavigation(Mpin);

• 写类组件的时候不要尝试直接调用任何Hook，Hook是面向函数组件设计的能力，类组件要用导航要么取props里自动注入的实例，要么用官方提供的类组件适配API
• render方法必须返回单个根节点，多个元素并列的时候一定要用View或者<>...</>（Fragment）包一层，否则会直接运行报错

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