useNavigation

useNavigation は、navigation オブジェクトへのアクセスを提供するフックです。navigation プロップをコンポーネントに直接渡せない場合や、ネストが深い子コンポーネントの場合に渡さないようにしたい場合に便利です。

useNavigation() は、それが内部にある画面の navigation プロップを返します。

例

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

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

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

詳細については、navigation プロップ のドキュメントを参照してください。

クラスコンポーネントで使用

フックを使用するには、クラスコンポーネントを関数コンポーネントでラップできます

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} />;
}