从任何组件访问导航道具

useNavigation 是一个钩子，它提供对 navigation 对象的访问权限。当您无法直接将 navigation 道具传递到组件中，或者不想在深度嵌套的子组件中传递它时，它很有用。

不是屏幕组件的普通组件不会自动接收导航道具。例如，在这个 GoToButton 组件中

import * as React from 'react';
import { Button } from 'react-native';

function GoToButton({ navigation, screenName }) {
  return (
    <Button
      title={`Go to ${screenName}`}
      onPress={() => navigation.navigate(screenName)}
    />
  );
}

要解决此异常，您可以在从屏幕渲染 GoToButton 时将 navigation 道具传递到 GoToButton 中，如下所示：<GoToButton navigation={props.navigation} />。

或者，您可以使用 useNavigation 来自动提供 navigation 道具（如果您好奇，它通过 React 上下文）。

在组件中使用 useNavigation

import * as React from 'react';
import { Button } from 'react-native';
import { useNavigation } from '@react-navigation/native';

function GoToButton({ screenName }) {
  const navigation = useNavigation();

  return (
    <Button
      title={`Go to ${screenName}`}
      onPress={() => navigation.navigate(screenName)}
    />
  );
}

使用这种方法，您可以在应用程序中的任何位置渲染 GoToButton，而无需显式传递 navigation 属性，它将按预期工作。