使用 react-navigation V. 5+ 添加适合标题的图像？

Question

我想添加一个带有背景颜色的自定义标题以及一个需要适合标题的图像。我正在使用 React Navigation 5+ (@react-navigation/native, @react-navigation/stack)，但图像不适合标题。有没有办法添加自定义标头（例如将组件传递给它）？
这是我的做法（想知道是否有更好的方法）：

import * as React from 'react';
import { View,Image, Text, TouchableWithoutFeedback, Button, StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator, HeaderTitle } from '@react-navigation/stack';
import Icon from 'react-native-vector-icons/Ionicons';



const Stack = createStackNavigator();

class App extends React.Component {

  constructor(props) {
    super(props);

  }


  render () {
    return (
      <NavigationContainer>
      <Stack.Navigator>

        <Stack.Screen 
        name="Home" 
        component={HomeScreen}
        options={{
          headerBackground: props => <Header  {...this.props}/>,

        }}
        />
         <Stack.Screen 
         name="FeedbackScreen"
         component={FeedbackScreen}

         />
      </Stack.Navigator>
    </NavigationContainer>
    )
  }
}

function HomeScreen({navigation}) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>  
      <Button 
      title="Feedback"
      onPress={()=> navigation.navigate('FeedbackScreen')}/>
    </View>
  );
}

function FeedbackScreen() {
  return (
    <View>

    </View>
  )
}

function Header() {

  return (
    <View style={{backgroundColor: "#4f2170", flex:1, }}>
      <Image style={StyleSheet.absoluteFill} source={require('./Images/Mon_logo.png')} />

    </View>
    );
}




export default App; 

我尝试了其他答案，但没有成功...

Answer 1

完整的自定义标题：

import { Dimensions } from "react-native";

let {width,height} = Dimensions.get('window');

export default StyleSheet.create({
   container: {
        width: width,
        backgroundColor: '#00f7d2',
        elevation: 10,
    },
   row1: {
        flexDirection: 'row',
        alignItems: 'center',
        paddingHorizontal: 20,
    },
    row2: {
        justifyContent: 'center',
        alignItems: 'center',
    },
    subLine: {
        color: '#000',
        fontWeight: '500',
        fontSize: 12
    },
    heading: {
        fontSize: 30,
        color: '#000',
        textAlign: 'center',
        width: width*0.75,
        fontWeight: 'bold'
    },
});


import React, { Component } from "react";
import { 
    View,
    StatusBar,
    TouchableOpacity,
    Text,
    Dimensions,
} from "react-native";
import styles from '../styles/HeaderStyle';
import FaIcon from 'react-native-vector-icons/FontAwesome';
import {DrawerActions, createDrawerNavigator} from 'react-navigation';


class Header extends Component{

    constructor(props){
        super(props);
        this.state = {}
    };

render() {
        return (
            <View>
                <StatusBar backgroundColor="#00f7d2" barStyle="dark-content" />
                <View style={styles.container}>

                    <View style={styles.row1}>
                        {
                            this.props.goBack ? 
                            <TouchableOpacity onPress={()=>{
                                this.props.propsRef.navigation.goBack();
                            }}>
                                <FaIcon name="arrow-left" size={30} color="#000"/>
                            </TouchableOpacity> : 
                            <TouchableOpacity onPress={()=>{
                                this.props.propsRef.navigation.dispatch(DrawerActions.openDrawer());
                            }}>
                                <FaIcon name="bars" size={30} color="#000"/>
                            </TouchableOpacity>
                        }
                        <Text style={styles.heading}>
                        {
                            this.props.title ? this.props.title : "Credito"
                        }
                        </Text>
                    </View>ss

                </View>
            </View>
        );
    }
}