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