useNavigation

useNavigation 是一个 Hook，用于访问 navigation 对象。当您无法直接将 navigation 对象作为 prop 传递给组件，或者不想在深度嵌套的子组件中传递它时，它非常有用。

useNavigation Hook 返回它所使用的屏幕的 navigation 对象

静态

import { useNavigation } from '@react-navigation/native';

function MyBackButton() {
  const navigation = useNavigation();

  return (
    <Button
      onPress={() => {
        navigation.goBack();
      }}
    >
      Back
    </Button>
  );
}

在 Snack 上尝试

动态

import { useNavigation } from '@react-navigation/native';

function MyBackButton() {
  const navigation = useNavigation();

  return (
    <Button
      onPress={() => {
        navigation.goBack();
      }}
    >
      Back
    </Button>
  );
}

在 Snack 上尝试

查看如何使用 TypeScript 设置 useNavigation 这里。

有关更多信息，请参阅 navigation 对象 的文档。

与类组件一起使用

您可以将您的类组件包装在一个函数组件中以使用 Hook

class MyBackButton extends React.Component {
  render() {
    // Get it from props
    const { navigation } = this.props;
  }
}

// Wrap and export
export default function (props) {
  const navigation = useNavigation();

  return <MyBackButton {...props} navigation={navigation} />;
}