解决TypeScript无状态组件设置navigationOptions的类型报错

这个问题我之前在项目里也碰到过，TypeScript对函数组件的类型校验特别严格，直接给函数组件挂载navigationOptions属性会因为类型不匹配报错。下面给你几种可行的解决方案：

方法一：使用NavigationScreenComponent类型定义组件 #

react-navigation专门提供了NavigationScreenComponent类型，它已经内置了navigationOptions的类型声明，直接用它来定义你的组件就能解决类型报错：

import React from 'react';
import { View, Text } from 'react-native';
import { NavigationScreenComponent, NavigationScreenProps } from 'react-navigation';

// 自定义Props类型，继承NavigationScreenProps获取导航相关属性
interface MyComponentProps extends NavigationScreenProps {
  // 这里可以添加你的自定义props
  userName?: string;
}

// 使用NavigationScreenComponent指定组件类型
const MyComponent: NavigationScreenComponent<MyComponentProps> = (props) => {
  return (
    <View>
      <Text>Welcome {props.userName}</Text>
    </View>
  );
};

// 现在添加navigationOptions不会有类型错误了
MyComponent.navigationOptions = {
  title: '我的页面',
  headerStyle: {
    backgroundColor: '#f4511e',
  },
};

export default MyComponent;

方法二：使用withNavigationOptions高阶组件 #

如果不想修改组件的基础类型定义，可以用react-navigation提供的withNavigationOptions高阶组件包裹你的组件，它会自动处理类型兼容问题：

import React from 'react';
import { View, Text } from 'react-native';
import { withNavigationOptions, NavigationScreenProps } from 'react-navigation';

interface MyComponentProps extends NavigationScreenProps {
  userName?: string;
}

const MyComponent = (props: MyComponentProps) => {
  return (
    <View>
      <Text>Welcome {props.userName}</Text>
    </View>
  );
};

// 通过HOC注入navigationOptions
export default withNavigationOptions({
  title: '我的页面',
  headerStyle: {
    backgroundColor: '#f4511e',
  },
})(MyComponent);

方法三：适配react-navigation v5+（如果使用新版本） #

如果你用的是react-navigation v5及以上版本，官方已经放弃了navigationOptions的写法，改用setOptions钩子或者组件的options属性，这种写法天然适配TypeScript：

import React, { useLayoutEffect } from 'react';
import { View, Text } from 'react-native';
import { useNavigation } from '@react-navigation/native';

const MyComponent = ({ userName }: { userName?: string }) => {
  const navigation = useNavigation();

  useLayoutEffect(() => {
    // 设置页面导航选项
    navigation.setOptions({
      title: '我的页面',
      headerStyle: {
        backgroundColor: '#f4511e',
      },
    });
  }, [navigation]);

  return (
    <View>
      <Text>Welcome {userName}</Text>
    </View>
  );
};

export default MyComponent;

额外注意事项 #

• 确保你已经安装了对应版本的类型包：v4及以下版本需要安装@types/react-navigation（执行npm install @types/react-navigation --save-dev）；v5+版本的@react-navigation/native本身已经包含类型定义，无需额外安装。
• 如果你的navigationOptions需要依赖组件props，可以用函数形式返回选项：

  // 方法一中的写法
  MyComponent.navigationOptions = (props: MyComponentProps) => ({
    title: `欢迎 ${props.userName}`,
  });
  

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