react-navigation 導航鈎子類型

Question

我正在使用 react-navigation 中的這個鈎子，而不是在不同的組件中再次調用這個鈎子，我想將navigation作為道具傳遞。

const navigation = useNavigation();
...
  <MyButton
     resetLocation={resetLocation}
     navigation={navigation}
  /> 

但是我無法弄清楚我應該傳遞給 MyButton 組件的這個導航道具的“類型”。

type MyButtonProps = {
  resetLocation: (locationToReset: string) => void;
  navigation: any;
};

export const MyButton: React.FunctionComponent<MyButtonProps> = ({
  resetLocation,
  navigation,

我應該用什么代替navigation: any; 和？

Answer 1

使用NavigationProp<ParamListBase>

這里是 useNavigation 的定義，我把它貼在這里以防萬一。

import * as React from 'react';
import type { ParamListBase } from '@react-navigation/routers';
import NavigationContext from './NavigationContext';
import type { NavigationProp } from './types';

/**
 * Hook to access the navigation prop of the parent screen anywhere.
 *
 * @returns Navigation prop of the parent screen.
 */
export default function useNavigation<
  T extends NavigationProp<ParamListBase>
>(): T {
  const navigation = React.useContext(NavigationContext);

  if (navigation === undefined) {
    throw new Error(
      "Couldn't find a navigation object. Is your component inside a screen in a navigator?"
    );
  }

  return navigation as T;
}

這是更多信息的鏈接https://github.com/react-navigation/react-navigation/blob/main/packages/core/src/useNavigation.tsx