React native 从react navigation扩展默认标题以组成新组件

如何在react navigation中实现从默认标题组件扩展而来的主题标题？我已经试过这样的方法：

as类组件

import React, {PureComponent} from 'react';
import {Header, HeaderProps} from 'react-navigation-stack';
import {StyleSheet} from 'react-native';
import {ThemeContext} from 'styled-components';

export default class ThemedHeader extends PureComponent<HeaderProps> {
  static contextType = ThemeContext;

  render() {
    const {scene} = this.props;
    const {colors} = this.context;

    const headerStyleObj = StyleSheet.flatten(
      scene.descriptor.options.headerStyle,
    );

    const themedScene = {
      ...scene,
      descriptor: {
        ...scene.descriptor,
        options: {
          ...scene.descriptor.options,
          headerTintColor: colors.accent,
          headerStyle: {
            backgroundColor: colors.primary,
            ...headerStyleObj,
          },
        },
      },
    };

    //@ts-ignore
    return <Header {...props} scene={themedScene} />;
  }
}

在导航选项中定义为

标题时返回以下错误：

在
导航选项中解决将
主题标题作为内联渲染函数
道具=>
传递到
标题上的问题

import React, {useMemo} from 'react';
import {Header, HeaderProps} from 'react-navigation-stack';
import {useTheme} from 'react-native-paper';
import {StyleSheet} from 'react-native';
import {Theme} from 'react-native-paper/lib/typescript/src/types';
import {ThemeContext} from 'styled-components';

export default function ThemedHeader(props: HeaderProps, context: Theme) {
  const {scene} = props;
  const {colors} = useTheme();

  const headerStyleObj = StyleSheet.flatten(
    scene.descriptor.options.headerStyle,
  );

  const themedScene = {
    ...scene,
    descriptor: {
      ...scene.descriptor,
      options: {
        ...scene.descriptor.options,
        headerTintColor: colors.accent,
        headerStyle: {
          backgroundColor: colors.primary,
          ...headerStyleObj,
        },
      },
    },
  };

  //@ts-ignore
  return <Header {...props} scene={themedScene} />;
}