TypeScript中React Navigation如何正确使用navigation.setOptions

你遇到的类型错误由两个写法问题导致：

• navigation.setOptions本身是函数类型的方法，不是可直接赋值的对象属性，你写navigation.setOptions = { headerTitle: 'Demo' }的逻辑是尝试把内置的函数方法覆盖为普通对象，TS检测到类型不匹配就会抛出你看到的报错。
• 即使修正为函数调用形式，也不能直接在组件渲染函数顶层执行setOptions，否则会在每次组件重渲染时重复触发导航更新，引发性能问题甚至渲染报错。

正确的用法是调用setOptions方法并传入配置对象，同时将调用逻辑放在useLayoutEffect钩子中（推荐用这个钩子而非useEffect，可以保证导航栏配置在页面UI绘制前同步生效，避免标题闪烁问题）。

修正后的完整代码如下：

import { useNavigation } from '@react-navigation/native';
import { StackNavigationProp } from '@react-navigation/stack';
import React, { useLayoutEffect } from 'react';
import { SafeAreaView, Text } from 'react-native';
import { RootStackParamList } from '../typings';

type LoginScreenProps = StackNavigationProp<RootStackParamList, 'Login'>;

const Login = () => {
  const navigation = useNavigation<LoginScreenProps>();

  useLayoutEffect(() => {
    // 调用setOptions方法，传入自定义导航栏配置
    navigation.setOptions({
      headerTitle: 'Demo',
      // 可按需添加其他导航栏配置，例如：
      // headerTintColor: '#ffffff',
      // headerStyle: { backgroundColor: '#1677ff' },
      // headerLeft: () => <CustomBackButton />
    });
  }, [navigation]);

  return (
    <SafeAreaView>
        <Text>Login</Text>
    </SafeAreaView>
  )
}

export default Login

• 你之前定义的RootStackParamList类型写法完全正确，不需要做额外修改。
• 如果需要根据组件内部state、props动态更新导航栏配置，只需要把对应的变量加到useLayoutEffect的依赖数组中，依赖变化时会自动同步更新导航栏配置。

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