在TypeScript中如何定义React Navigation的navigationOptions参数类型？

首先，核心思路是先定义屏幕所需参数的类型，再结合React Navigation提供的官方泛型类型来约束navigation参数，这样既能让myParam成为必填字符串，又能获得IDE的自动补全提示。

针对你使用的类组件+React Navigation v4场景 #

1. 先导入React Navigation的官方类型NavigationScreenProps，然后定义当前屏幕的参数结构：

import { NavigationScreenProps } from 'react-navigation';

// 明确这个屏幕必须接收的参数，myParam设为必填字符串
type MyScreenParams = {
  myParam: string;
};

2. 在navigationOptions的参数中，给navigation指定类型为NavigationScreenProps<MyScreenParams>：

class MyScreen extends React.Component {
  static navigationOptions = ({ navigation }: { navigation: NavigationScreenProps<MyScreenParams> }) => ({
    title: navigation.state.params.myParam, // 这里myParam会被自动推断为必填字符串，IDE会提供补全
  });

  render() {
    // 组件内部使用params时也能获得类型提示
    const { myParam } = this.props.navigation.state.params;
    return <View><Text>{myParam}</Text></View>;
  }
}

如果你已迁移到React Navigation v5+（函数组件更常用） #

新版React Navigation的写法略有不同，需要用RouteProp和NavigationProp来约束路由与导航对象：

import { RouteProp, NavigationProp, useRoute, useNavigation } from '@react-navigation/native';

// 先定义整个导航栈的参数列表
type RootStackParamList = {
  MyScreen: { myParam: string }; // 绑定MyScreen对应的参数结构
};

// 分别定义当前屏幕的路由和导航专属类型
type MyScreenRouteProp = RouteProp<RootStackParamList, 'MyScreen'>;
type MyScreenNavigationProp = NavigationProp<RootStackParamList, 'MyScreen'>;

const MyScreen = () => {
  const route = useRoute<MyScreenRouteProp>();
  const navigation = useNavigation<MyScreenNavigationProp>();

  return <View><Text>{route.params.myParam}</Text></View>;
};

// 设置标题可以直接在Stack.Screen中配置
// <Stack.Screen
//   name="MyScreen"
//   component={MyScreen}
//   options={({ route }) => ({ title: route.params.myParam })}
// />

为什么之前的Gist方案可能效果不佳？ #

很多非官方的自定义类型要么结构不完整，要么和你使用的React Navigation版本不兼容。直接使用官方提供的泛型类型，能完美适配不同版本的导航库，确保类型推断的准确性。

内容的提问来源于stack exchange，提问作者MikO