从 react-navigation 扩展默认 Header 以组成一个新组件

Question

如何在 react-navigation 中实现从默认 Header 组件扩展的 ThemedHeader？我已经尝试过这样的事情：

作为Class组件

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} />;
  }
}

和return在navigationOptions中定义为header时出现如下错误：

class component error

作为函数组件：

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} />;
}

和return在navigationOptions中定义为header时出现如下错误：

function component errro

Answer 1

解决在 navigationOptions

中的 header 上将 ThemedHeader 作为内联渲染函数 props => <ThemedHeader {...props} /> 传递

从 react-navigation 扩展默认 Header 以组成一个新组件

Extending default Header from react-navigation to compose a new component

react-native

react-navigation

react-navigation-stack