React类组件中在render内外通过useNavigation定义navigation有何区别？

首先明确：useNavigation是React Hooks，完全不能在类组件中直接使用，你给出的两种写法（OPTION1和OPTION2）都会触发React的Hooks规则报错，原因如下：

• OPTION1（类顶层定义）：Hooks只能在函数组件或自定义Hooks的顶层作用域调用，类的字段定义不属于这个合法范围，直接运行会抛出Hooks违规的错误。
• OPTION2（render方法内定义）：类组件的render方法本质是类的成员函数，并非函数组件的顶层作用域，同样违反Hooks的使用规则——Hooks不允许在类组件的任何方法中调用。

类组件获取navigation对象的正确方式 #

方式1：直接从props中获取

如果你的类组件是被React Navigation的导航器（如StackNavigator、TabNavigator）直接渲染的，navigation对象会自动通过props传入：

import { Component } from 'react';
import { Button } from 'react-native';

class Screen1 extends Component {
  render() {
    // 从props中解构navigation
    const { navigation } = this.props;
    return (
      <Button onPress={() => navigation.navigate('Screen2')} title="跳转到Screen2" />
    );
  }
}

方式2：使用withNavigation高阶组件

如果你的类组件不是被导航器直接渲染的（比如是某个子组件），可以用withNavigation高阶组件包裹，它会把navigation对象注入到组件的props中：

import { Component } from 'react';
import { withNavigation } from '@react-navigation/native';
import { Button } from 'react-native';

class Screen1 extends Component {
  render() {
    const { navigation } = this.props;
    return (
      <Button onPress={() => navigation.navigate('Screen2')} title="跳转到Screen2" />
    );
  }
}

// 用withNavigation包裹组件后导出
export default withNavigation(Screen1);

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