原始标题标题图像被剪切，为什么？

Question

因此，我正在使用React-native应用程序，并且我使用react-navigation进行导航，在屏幕选项的headerTitle中使用图像可以工作，但是图像被剪切掉了。我尝试弄乱图像的高度/宽度，想知道它是否是标题的填充问题，但还是一无所获。有什么想法吗？

这里是组件

import React from "react";
import { View, Image, StyleSheet } from "react-native";

function HeaderLogo(props) {
    return(
        <Image style={styles.logoStyles} source={require("../../assets/images/svg/LogoNoTxt.png")}/>
    );
};

const styles = StyleSheet.create({
    logoStyles: {
        height: 40,
        width: 40,
    },
});

export default HeaderLogo

这里是堆栈导航器

import React from "react";
import { createStackNavigator } from '@react-navigation/stack';

//Components
import HeaderLogo from "../../components/images/HeaderLogo";

//TopTab
import HomeTopTabNavigator from "../topTab/HomeTopTabNavigator";

//Screens
import AddTasks from "../../screens/home/AddTasks";

//Initialize vars
const Stack = createStackNavigator();

function HomeStackNavigator() {
    return(
        <Stack.Navigator screenOptions={defaultOptions}>
            <Stack.Screen name="Home" component={HomeTopTabNavigator}/>
            <Stack.Screen name="AddTasks" component={AddTasks}/>
        </Stack.Navigator>
    );
};

//Options
const defaultOptions = {
    headerStyle: {
        elevation: 0,
        shadowColor: "transparent",
    },
    //headerTitleAlign: "center",
    headerTitle: (
        <HeaderLogo />
    ),
    headerTitleAlign: "center",
};

export default HomeStackNavigator;

Image of Logo on the header (cut off)

Answer 1

只需将组件包装在函数中，并正确呈现它。