reactjs - React Navigation v6 如何创建自定义 Header 作为自己的组件

Question

有人可以帮我处理 react-navigatin v6 中的标题栏吗？我的动机是我需要在标题栏下添加像分隔符而不是默认分隔符的图像条：

我想创建自己的标题栏，所以我创建了Navigator：

        <Stack.Navigator
            initialRouteName="NoConnectionContent"
            screenOptions={{
                header: (props) => <Header {...props} />,
                headerStyle: {
                    backgroundColor: 'white',
                },
            }}>
            <Stack.Screen
                name="NoConnectionContent"
                component={NoConnectionContent}
                options={{title: <Text>No connection</Text>}}
            />
            <Stack.Screen name="Home" component={HomeScreen} />
            <Stack.Screen name="Details" component={DetailsScreen} />
        </Stack.Navigator>

我创建了自己的组件Header：

import React, {Component} from 'react';
import {View, StyleSheet, Image} from 'react-native';
import Config from 'react-native-config';
import { Header as  RNNHeader, getHeaderTitle} from '@react-navigation/elements';

const Header = (props) => {
    let headerStripSource =
        Config.ENV === 'dev'
            ? require('../../assets/images/devhead.jpg')
            : require('../../assets/images/prodhead.jpg');

        const title = getHeaderTitle(props.options, props.route.name);
    return (
        <View>
            <RNNHeader {...props} title={title} />
            <Image source={headerStripSource} style={styles.headStripImageStyle}/>
        </View>
    );
};

const styles = StyleSheet.create({
    headStripImageStyle: {
        position: 'absolute',
        bottom: -12,
        resizeMode: 'stretch',
        height: 10,
        width: '100%',
        marginBottom: 8,
    },
});

它可以工作，但我必须手动设置后退按钮、标题等......但我想自动将属性传递给标题，如：

<RNNHeader {...props} />

它在版本 5 中的 react-navigation 中工作，但在版本 6 中不起作用，因为 Header 在 @react-navigation/elements 中。

你有办法怎么做。

非常感谢。