react-navigation 导航钩子类型

Question

I am using this hook from react-navigation and instead of calling the hook again in different components, I want to pass navigation as a prop.

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

But I am unable to figure out the "type" for this navigation prop that I should pass into my MyButton component.

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

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

What should I replace navigation: any; with?

Answer 1

Use NavigationProp<ParamListBase>

Here is the definition of useNavigation, I pasted it here just in case.

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

Here is the link for more info https://github.com/react-navigation/react-navigation/blob/main/packages/core/src/useNavigation.tsx