從任何元件存取導覽屬性

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

若要解決此例外狀況，可以將 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 屬性，而且它會照預期運作。